vibefast-cli 1.3.0 → 1.3.1

package/recipes/number-stepper/apps/native/src/components/advanced-ui/stepper/demo.tsx

@@ -1,8 +1,8 @@
 import type React from 'react';
 import { useState } from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { SafeAreaView } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
 
 import { Stepper, StepperButton, StepperContent, StepperValue } from './index';

package/recipes/number-stepper/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "number-stepper",
   "version": "1.0.0",
-  "description": "Multi-step number stepper with context management",
+  "description": "Advanced UI component: number-stepper",
   "target": "native",
   "copy": [
     {
@@ -10,6 +10,9 @@
     }
   ],
   "dependencies": {
-    "expo": ["react-native-reanimated"]
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
   }
 }

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/interactive-onboarding.tsx

@@ -1,24 +1,24 @@
 import React, { useState } from 'react';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
-import { OnboardingHeader } from './ui/onboarding-header';
+import { SafeAreaView } from '@/components/ui';
 
-import { WelcomeStep } from './steps/welcome-step';
+import { AIToneStep } from './steps/ai-tone-step';
+import { CurrencyStep } from './steps/currency-step';
 import { FeatureAIStep } from './steps/feature-ai-step';
-import { FeatureScanStep } from './steps/feature-scan-step';
-import { FeatureManualStep } from './steps/feature-manual-step';
 import { FeatureChatbotStep } from './steps/feature-chatbot-step';
-import { CurrencyStep } from './steps/currency-step';
+import { FeatureManualStep } from './steps/feature-manual-step';
+import { FeatureScanStep } from './steps/feature-scan-step';
 import { MainReasonStep } from './steps/main-reason-step';
-import { StruggleStep } from './steps/struggle-step';
+import { NotificationStep } from './steps/notification-step';
 import { OverspendStep } from './steps/overspend-step';
-import { AIToneStep } from './steps/ai-tone-step';
+import { PersonalizingStep } from './steps/personalizing-step';
+import { RatingStep } from './steps/rating-step';
 import { ReminderStep } from './steps/reminder-step';
-import { NotificationStep } from './steps/notification-step';
 import { SafetyStep } from './steps/safety-step';
-import { RatingStep } from './steps/rating-step';
-import { PersonalizingStep } from './steps/personalizing-step';
-import { SafeAreaView } from '@/components/ui';
+import { StruggleStep } from './steps/struggle-step';
+import { WelcomeStep } from './steps/welcome-step';
+import { OnboardingHeader } from './ui/onboarding-header';
 
 type OnboardingStep =
   | 'welcome'
@@ -67,7 +67,6 @@ export function InteractiveOnboarding({
   onSignIn,
 }: InteractiveOnboardingProps) {
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');
 
   // State for all steps
   const [currency, setCurrency] = useState<string | null>(null);
@@ -78,15 +77,10 @@ export function InteractiveOnboarding({
   const [reminderFreq, setReminderFreq] = useState<string | null>(null);
   const [reminderTime, setReminderTime] = useState<string>('9 PM');
 
-  // Spend Level State (Min/Max)
-  const [minSpend, setMinSpend] = useState('');
-  const [maxSpend, setMaxSpend] = useState('');
-
   const currentStep = STEPS_ORDER[currentStepIndex];
 
   const handleNext = () => {
     if (currentStepIndex < STEPS_ORDER.length - 1) {
-      setDirection('forward');
       setCurrentStepIndex((prev) => prev + 1);
     } else {
       onComplete();
@@ -95,7 +89,6 @@ export function InteractiveOnboarding({
 
   const handleBack = () => {
     if (currentStepIndex > 0) {
-      setDirection('backward');
       setCurrentStepIndex((prev) => prev - 1);
     }
   };

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/ai-tone-step.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View } from 'react-native';
-import Animated, { FadeIn, FadeOut, FadeInDown } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
+import React from 'react';
+import { View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface AIToneStepProps {
   selectedTone: string | null;
@@ -41,8 +41,6 @@ export function AIToneStep({
   onSelectTone,
   onNext,
 }: AIToneStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/currency-step.tsx

@@ -1,16 +1,18 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
 import React from 'react';
-import { View, ScrollView, TextInput } from 'react-native';
+import { ScrollView, TextInput, View } from 'react-native';
 import Animated, {
-  FadeInDown,
-  Layout,
   FadeIn,
+  FadeInDown,
   FadeOut,
+  Layout,
 } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { SUPPORTED_CURRENCIES, getCurrencyFlag } from '../../constants';
-import * as Haptics from 'expo-haptics';
+
+import { getCurrencyFlag, SUPPORTED_CURRENCIES } from '../../constants';
 
 interface CurrencyStepProps {
   selectedCurrency: string | null;

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/feature-ai-step.tsx

@@ -1,20 +1,21 @@
-import React, { useState, useEffect } from 'react';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Animated, {
   FadeIn,
   FadeOut,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
   withRepeat,
   withSequence,
+  withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import { LinearGradient } from 'expo-linear-gradient';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 const AIDemo = () => {
   const theme = useThemeConfig();
@@ -55,7 +56,7 @@ const AIDemo = () => {
     }, 30); // Faster typing (30ms)
 
     return () => clearInterval(typingInterval);
-  }, []);
+  }, [cardOpacity, cardScale, cursorOpacity, fullText]);
 
   const animatedCardStyle = useAnimatedStyle(() => ({
     opacity: cardOpacity.value,

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/feature-chatbot-step.tsx

@@ -1,15 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Animated, {
   FadeIn,
   FadeOut,
   SlideInRight,
 } from 'react-native-reanimated';
-import { LinearGradient } from 'expo-linear-gradient';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 const ChatbotDemo = () => {
   const theme = useThemeConfig();

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/feature-manual-step.tsx

@@ -1,3 +1,5 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
 import React from 'react';
 import { View } from 'react-native';
 import Animated, {
@@ -5,10 +7,9 @@ import Animated, {
   FadeOut,
   SlideInRight,
 } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 const ManualDemo = () => {
   const theme = useThemeConfig();

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/feature-scan-step.tsx

@@ -1,6 +1,9 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, {
+  Easing,
   FadeIn,
   FadeOut,
   useAnimatedStyle,
@@ -8,12 +11,10 @@ import Animated, {
   withRepeat,
   withSequence,
   withTiming,
-  Easing,
 } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 const ScanDemo = () => {
   const theme = useThemeConfig();
@@ -37,7 +38,7 @@ const ScanDemo = () => {
       -1,
       true,
     );
-  }, []);
+  }, [checkmarkScale, scanLineY]);
 
   const animatedLineStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: scanLineY.value }],

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/main-reason-step.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, ScrollView } from 'react-native';
-import Animated, { FadeIn, FadeOut, FadeInDown } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface MainReasonStepProps {
   selectedReason: string | null;
@@ -50,8 +50,6 @@ export function MainReasonStep({
   onSelectReason,
   onNext,
 }: MainReasonStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/notification-step.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { View, Alert, Linking } from 'react-native';
-import Animated, { ZoomIn, FadeIn, FadeOut } from 'react-native-reanimated';
-import { Text, Button } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import * as Notifications from 'expo-notifications';
 import * as Haptics from 'expo-haptics';
+import * as Notifications from 'expo-notifications';
+import React, { useState } from 'react';
+import { Alert, Linking, View } from 'react-native';
+import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
+
+import { Button, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
 
 interface NotificationStepProps {
   onEnable: () => void;

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/overspend-step.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, ScrollView } from 'react-native';
-import Animated, { FadeIn, FadeOut, FadeInDown } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface OverspendStepProps {
   selectedCategories: string[];
@@ -57,8 +57,6 @@ export function OverspendStep({
   onToggleCategory,
   onNext,
 }: OverspendStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/personalizing-step.tsx

@@ -1,19 +1,20 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useState } from 'react';
-import { View, Dimensions } from 'react-native';
+import { Dimensions, View } from 'react-native';
 import Animated, {
+  Easing,
   FadeIn,
+  interpolate,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
   withSequence,
   withTiming,
-  Easing,
-  interpolate,
 } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+
 import { Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import { LinearGradient } from 'expo-linear-gradient';
 
 interface PersonalizingStepProps {
   onComplete: () => void;
@@ -86,13 +87,13 @@ export function PersonalizingStep({ onComplete }: PersonalizingStepProps) {
     }, 2000);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [circleScale, iconOpacity, onComplete, ringRotation]);
 
   useEffect(() => {
     progress.value = withTiming((currentStep + 1) / STEPS.length, {
       duration: 500,
     });
-  }, [currentStep]);
+  }, [currentStep, progress]);
 
   const animatedRingStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: `${ringRotation.value}deg` }],

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/rating-step.tsx

@@ -1,11 +1,12 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
+import * as StoreReview from 'expo-store-review';
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import Animated, { FadeInDown, FadeIn, FadeOut } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import * as StoreReview from 'expo-store-review';
-import * as Haptics from 'expo-haptics';
 
 interface RatingStepProps {
   onNext: () => void;

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/reminder-step.tsx

@@ -1,10 +1,10 @@
+import * as Haptics from 'expo-haptics';
 import React, { useState } from 'react';
-import { View, ScrollView } from 'react-native';
-import Animated, { FadeInDown, FadeIn, FadeOut } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { DateTimePickerComponent } from '@/components/ui/date-time-picker';
-import * as Haptics from 'expo-haptics';
 
 interface ReminderStepProps {
   selectedFrequency: string | null;
@@ -30,7 +30,6 @@ export function ReminderStep({
   onSelectTime,
   onNext,
 }: ReminderStepProps) {
-  const theme = useThemeConfig();
   const showTimePicker =
     selectedFrequency === 'daily' || selectedFrequency === 'purchase';
   const [customDate, setCustomDate] = useState(new Date());

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/safety-step.tsx

@@ -1,10 +1,11 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
 import React from 'react';
 import { View } from 'react-native';
-import Animated, { ZoomIn, FadeIn, FadeOut } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 interface SafetyStepProps {
   onComplete: () => void;

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/struggle-step.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, ScrollView } from 'react-native';
-import Animated, { FadeIn, FadeOut, FadeInDown } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface StruggleStepProps {
   selectedStruggle: string | null;
@@ -50,8 +50,6 @@ export function StruggleStep({
   onSelectStruggle,
   onNext,
 }: StruggleStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/welcome-step.tsx

@@ -1,12 +1,13 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Clipboard from 'expo-clipboard';
+import * as Haptics from 'expo-haptics';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useState } from 'react';
-import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
 import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
-import { LinearGradient } from 'expo-linear-gradient';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button, Pressable } from '@/components/ui';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
-import * as Clipboard from 'expo-clipboard';
 
 /**
  * Recommended theme colors for this onboarding (from CashPilot/Expense Tracker app)

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/ui/onboarding-header.tsx

@@ -1,13 +1,14 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import React from 'react';
 import { View } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { useThemeConfig } from '@/lib/use-theme-config';
+
 import { Pressable } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
 
 interface OnboardingHeaderProps {
   onBack: () => void;
@@ -25,7 +26,7 @@ export function OnboardingHeader({
 
   React.useEffect(() => {
     progressValue.value = withTiming(progress, { duration: 500 });
-  }, [progress]);
+  }, [progress, progressValue]);
 
   const animatedProgressStyle = useAnimatedStyle(() => ({
     width: `${progressValue.value * 100}%`,

package/recipes/onboarding/recipe.json

@@ -1,15 +1,18 @@
 {
   "name": "onboarding",
   "version": "1.0.0",
-  "description": "Premium onboarding flows (demo-one, expense-tracker)",
+  "description": "User onboarding flow",
   "copy": [
     {
       "from": "apps/native/src/features/onboarding",
       "to": "apps/native/src/features/onboarding"
     }
   ],
-  "target": "native",
-  "dependencies": {
-    "expo": ["react-native-reanimated", "react-native-gesture-handler"]
-  }
-}
+  "nav": {
+    "href": "/(root)/(protected)/onboarding",
+    "label": "Onboarding",
+    "icon": "🎯",
+    "color": "#84CC16"
+  },
+  "target": "native"
+}

package/recipes/payments/apps/native/src/app/paywall/index.tsx

@@ -0,0 +1,74 @@
+import { router, Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { FeatureButton, FocusAwareStatusBar } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function PaywallSelection() {
+  const theme = useThemeConfig();
+  const optionsTitle = translate('paywall.options_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: optionsTitle,
+      headerShown: true,
+      headerBackButtonDisplayMode: 'generic' as const,
+    }),
+    [optionsTitle],
+  );
+
+  const paywallOptions = [
+    {
+      id: 'remote',
+      title: translate('paywall.remote_title'),
+      icon: '💳',
+      color: '#FBBF24', // Amber
+      description: translate('paywall.remote_description'),
+      route: '/paywall/remote',
+      testID: 'remote-paywall-option',
+    },
+    {
+      id: 'local',
+      title: translate('paywall.local_title'),
+      icon: '🛒',
+      color: '#10B981', // Emerald
+      description: translate('paywall.local_description'),
+      route: '/paywall/local',
+      testID: 'local-paywall-option',
+    },
+  ];
+
+  const handleOptionPress = (route: string) => {
+    router.push(route as any);
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+      <ScrollView
+        style={{ backgroundColor: theme.colors.background }}
+        className="flex-1"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          <View className="-mx-2 flex-row flex-wrap">
+            {paywallOptions.map((option) => (
+              <View key={option.id} className="w-1/2 px-2 pb-4">
+                <FeatureButton
+                  title={option.title}
+                  icon={option.icon}
+                  color={option.color}
+                  description={option.description}
+                  testID={option.testID}
+                  onPress={() => handleOptionPress(option.route)}
+                />
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/recipes/payments/apps/native/src/app/paywall/local.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import LocalPaywall from '@/features/payments/app/local-paywall';
+import { RevenueCatAdapter } from '@/features/payments/services/revenuecat-adapter';
+import { translate } from '@/lib';
+
+export default function LocalPaywallScreen() {
+  const paymentService = useMemo(() => new RevenueCatAdapter(), []);
+  const localTitle = translate('paywall.local_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: localTitle,
+      headerShown: false,
+    }),
+    [localTitle],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <LocalPaywall paymentService={paymentService} />
+    </>
+  );
+}