Mobile development with AI tools is tricky because platform-specific behavior matters. A component that works in a web preview will crash on a real device if it uses unsupported APIs. These recipes produce code that accounts for iOS/Android differences, handles safe areas, respects platform conventions, and uses native modules correctly.
React Native component recipes with platform-specific handling
Flutter widget recipes with Material and Cupertino design
Navigation patterns for both frameworks with deep linking
Performance recipes for lists, animations, and image loading
Scenario: Your app needs tab navigation on iOS and drawer navigation on Android, following each platform’s conventions.
Create a platform-adaptive navigation system using React Navigation v7. (1) Define a RootNavigator that detects the platform and renders BottomTabNavigator on iOS or DrawerNavigator on Android. (2) Both contain the same 4 screens: Home, Search, Notifications, Profile. (3) For iOS: use @react-navigation/bottom-tabs with SF Symbols icons, haptic feedback on tab press, and a floating action button above the tab bar. (4) For Android: use @react-navigation/drawer with Material 3 styling, user header with avatar, and section dividers. (5) Both share the same stack screens within each tab/drawer item. (6) Add deep linking mapping URLs like myapp://profile/123 to screens with params. (7) Handle Android back button: pop nested stack first, exit confirmation on root. Type all params with RootStackParamList. Write a test verifying deep link resolution.
Expected output: Root navigator, iOS tabs, Android drawer, deep linking config, typed params, and tests.
Scenario: Your app must work on phones, tablets, and foldables with different layouts at each breakpoint.
Create a responsive layout system. (1) useResponsive() hook returning { width, height, breakpoint, isPhone, isTablet, isFoldable, orientation }. Breakpoints: phone (<600), tablet (600-1024), desktop (>1024). Detect foldables via hinge geometry API. (2) ResponsiveGrid component rendering 1 column on phone, 2 on tablet portrait, 3 on tablet landscape using FlatList numColumns. (3) ResponsiveStack rendering children vertically on phone, horizontally on tablet. (4) MasterDetail layout: on phone show list then navigate to detail; on tablet show list (1/3) and detail (2/3) simultaneously. (5) useScaledSize(baseSize) scaling proportionally to screen width relative to 375px base. Test layout changes by mocking Dimensions.
Expected output: useResponsive hook, three layout components, useScaledSize hook, and tests.
Scenario: Your Flutter app needs a branded design system working across iOS and Android.
Create a widget library in lib/widgets/. (1) AppButton with variants (primary, secondary, outline, ghost, destructive), sizes (sm, md, lg), loading spinner, disabled state, optional icons. Uses Theme.of(context). Cupertino rounded corners on iOS, Material ripple on Android. (2) AppTextField with label, helper text, error text, prefix/suffix icons, obscure toggle for passwords. (3) AppCard with optional header, body, footer, configurable elevation. (4) AppAvatar with circular image, initials fallback, loading shimmer, online/offline badge. (5) AppBottomSheet with drag handle, snap points (half/full screen), dismissible. (6) AppTheme class with light() and dark() factory methods defining all tokens. (7) WidgetBook showcase screen displaying every variant. Write widget tests for each.
Expected output: Five widget files, theme class, widget book, and widget tests.
Scenario: Your feed screen shows 1000+ items with images and stutters when scrolling. Pull-to-refresh feels laggy.
Build a high-performance feed using FlashList from @shopify/flash-list. (1) Replace FlatList with FlashList, set estimatedItemSize. (2) Create FeedItem wrapped in React.memo with comparison on id and updatedAt only. (3) Use react-native-fast-image with priority:normal for visible items, priority:low for prefetch. Shimmer placeholder while loading. (4) Pull-to-refresh with native RefreshControl, prepend new items without losing scroll position, show “X new items” banner for background refreshes. (5) Infinite scroll with onEndReached at threshold 0.5, footer spinner, handle no-more-items. (6) Scroll-to-top on active tab tap. (7) Memoize renderItem and keyExtractor. Test that the list renders without dropped frames.
Expected output: Feed screen with FlashList, memoized FeedItem, FastImage loading, and performance test.
Scenario: Your field service app must work without connectivity. Users enter data offline and it syncs when connected.
Implement offline-first with WatermelonDB. (1) Define models: WorkOrder (id, title, status, assignedTo, description, syncStatus), Photo (id, workOrderId, uri, caption, syncStatus), Note (id, workOrderId, content, syncStatus). (2) Sync adapter: on connectivity change (NetInfo), compare timestamps, push local changes (last-write-wins), pull server changes, mark synced. (3) Queue mutations offline with sync queue. Show “pending sync” badge on unsynced items. (4) Photos: store locally in app documents, upload during sync, replace URI after upload. (5) useNetworkStatus() hook: { isOnline, pendingSync, lastSyncedAt, syncNow() }. (6) Offline banner showing count of pending changes. Test: create offline, go online, verify sync.
Expected output: WatermelonDB models, sync engine, network hooks, offline banner, and sync tests.
Scenario: Your Flutter app uses Provider everywhere. Migrate to Riverpod for testability and type safety.
Set up Riverpod v2 with code generation. (1) Install flutter_riverpod, riverpod_annotation, riverpod_generator. (2) auth_provider.dart: @riverpod AsyncNotifier managing auth state, login/logout/refresh, token persisted to secure storage. (3) todo_provider.dart: @riverpod AsyncNotifier with CRUD, optimistic updates, auto-refetch on auth change via ref.watch. (4) filter_provider.dart: simple @riverpod for filter state plus derived filteredTodosProvider combining todos with filter. (5) Use ref.watch for reactive, ref.read for one-time callbacks. (6) Override providers in tests with ProviderContainer. (7) Add riverpod_lint. Write widget tests overriding providers with mocks.
Expected output: Three provider files, widget tree integration, and widget tests with mock overrides.
Scenario: You need NFC tag reading not covered by existing libraries.
Cursor’s multi-file editing generates native code alongside TypeScript simultaneously.
Claude Code generates .swift, .java, and .ts files in a single prompt — ideal for native modules.
Codex works across native and JavaScript files in parallel using worktree isolation.
Create a React Native Turbo Module for NFC. (1) TypeScript spec in src/NativeNfc.ts: readTag() returning { id, type, payload }, startScanning(options), stopScanning(), events for onTagDiscovered and onError. (2) iOS Swift implementation: CoreNFC, NFCNDEFReaderSessionDelegate, Info.plist permission, bridge events. Handle unavailable NFC on older devices. (3) Android Kotlin: NfcAdapter, AndroidManifest intent filters, onNewIntent discovery, bridge events. (4) useNfc() hook: { isAvailable, isScanning, lastTag, startScan, stopScan, error }. (5) Handle permissions: request on first scan, settings link if denied. Test hook with mocked native module.
Expected output: TurboModule spec, iOS Swift, Android Kotlin, useNfc hook, and tests.
Scenario: You need smooth 60fps animations for a swipeable card stack.
Build a swipeable card stack with react-native-reanimated v3 and react-native-gesture-handler. (1) SwipeableCard using Gesture.Pan() mapping translationX to rotation and like/nope overlay opacity. (2) On release: if past threshold (150px), animate off-screen. Otherwise spring back to center. Use withSpring for return, withTiming for exit. (3) CardStack rendering top 3 cards with scale/translateY depth offsets. Dismissed top card animates next up. (4) Vertical swipe up for “super like” with scale+rotate animation. (5) Undo button animating last card back. (6) All animations on UI thread via useSharedValue and useAnimatedStyle. (7) Haptic feedback at swipe threshold. Test gesture detection with mock events.
Expected output: SwipeableCard, CardStack, undo logic, haptic integration, and gesture tests.
Scenario: Your Flutter app looks identical on iOS and Android. Users expect platform-native patterns.
Create platform-adaptive widgets in lib/adaptive/. (1) AdaptiveScaffold rendering Scaffold on Android, CupertinoPageScaffold on iOS with matching app bars and nav. (2) AdaptiveDialog using AlertDialog on Android, CupertinoAlertDialog on iOS with same API. (3) AdaptiveSwitch using Switch.adaptive. (4) AdaptiveTextField using TextField on Android, CupertinoTextField on iOS with consistent validation. (5) AdaptiveDatePicker showing Android picker dialog or iOS date wheel. (6) PlatformHelper class overridable in tests. (7) AdaptivePage base class with platform-specific transitions: right-to-left on iOS, bottom-to-top on Android. Test each widget on both platforms by mocking Platform.isIOS.
Expected output: Six adaptive widgets, PlatformHelper, base page class, and cross-platform tests.
Scenario: Your app needs push notifications on both platforms with deep linking to specific screens.
Implement push using @notifee/react-native and @react-native-firebase/messaging. (1) Configure Firebase with google-services.json and GoogleService-Info.plist. Request permissions with pre-permission screen. (2) notifications/setup.ts: register device token, handle refresh, configure Android channels (Orders high, Messages default, Promotions low). (3) notifications/handlers.ts: background handler and foreground handler showing Notifee notifications. (4) notifications/deeplink.ts: parse data and navigate — order to OrderDetail, message to Chat, promo to Offers. Handle cold-start from notification. (5) useNotifications() hook: { permission, requestPermission, token, lastNotification }. (6) Test handling and deep link resolution.
Expected output: Firebase config, setup, handlers, deep link parser, hook, and tests.
Scenario: Your navigation is scattered Navigator.push calls with no type safety. You need declarative routing.
Set up GoRouter. (1) app_router.dart with GoRouter: shell route for main scaffold persisting bottom nav, nested routes per tab, parameterized /products/:id, redirect for auth. (2) Typed route helpers via go_router_builder: ProductRoute(id).go(context). (3) Deep linking: Android intent filters and iOS universal links. (4) Route guards: refreshListenable watches auth, redirect checks state, protected routes redirect to login with return URL. (5) Per-route transition animations. (6) Android back button: pop inner stack first, double-tap to exit on root. (7) Analytics: log route changes via observers. Test resolution, redirects, and deep linking.
Expected output: Router config, typed helpers, deep link config, guards, and navigation tests.
Scenario: Your app is feature-complete. Prepare for App Store and Play Store submission.
Prepare this React Native app for store submission. (1) iOS Info.plist: All privacy usage descriptions, bundle identifier, version, build number, ATS enabled, device capabilities. (2) Android build.gradle: applicationId, versionCode/Name, minSdkVersion 24, targetSdkVersion 34, release signing, ProGuard/R8. (3) Both: Generate app icons at all sizes from 1024x1024 source. Configure splash screens. (4) Build verification script: builds release for both platforms, verifies no console.log in production, no debug dependencies in release. (5) Generate RELEASE_CHECKLIST.md: test on real devices, verify deep links, check analytics, test push notifications, verify in-app purchases, screenshot all screens.
Expected output: Updated native configs, icon script, build verification script, and release checklist.
