React Native AI Prompts: Build Production iOS & Android Apps Faster in 2026

React Native in 2026: One Codebase, Two Stores

React Native with Expo has become the dominant cross-platform mobile framework for JavaScript teams. The developers shipping the most polished React Native apps use AI prompts that specify Expo Router, Reanimated 3, and the new Architecture (Fabric + JSI) — not the legacy patterns that dominate Stack Overflow. These prompts produce code that runs smoothly on real devices, not just simulators.

1. Expo Router App Architecture

You are a senior React Native architect using Expo SDK 52 and Expo Router v4.

Design a production mobile app architecture for a project management app targeting iOS and Android (with web support via Expo):

Navigation structure (Expo Router file-based):
- (auth)/login, (auth)/register, (auth)/forgot-password
- (app)/(tabs)/home, (app)/(tabs)/projects, (app)/(tabs)/notifications, (app)/(tabs)/profile
- (app)/project/[id], (app)/task/[id], (app)/settings/index

State management: Zustand stores (authStore, projectStore, taskStore, uiStore)
Data fetching: TanStack Query v5 with offline support
Storage: WatermelonDB for offline-first data, expo-secure-store for tokens
Push notifications: Expo Notifications + push token registration

Deliver:
1. Full app/ directory tree
2. Root layout setup: auth state guard, theme provider, toast, deep link handling
3. Tab bar configuration with badge counts
4. Authentication flow: how unauthenticated users are redirected, how deep links work post-login
5. Environment config: app.config.ts with EAS Build environment support

2. Authentication with Biometrics & Secure Storage

You are a React Native security engineer.

Implement a complete authentication system for Expo:

Token storage (NEVER AsyncStorage for sensitive data):
- expo-secure-store: store access token, refresh token, user ID
- Keychain (iOS) / Android Keystore (Android) via expo-secure-store

Auth flow:
- Login: POST to API, store tokens in SecureStore, navigate to (app) group
- Auto-login: on app launch, check SecureStore for tokens, validate access token, refresh if expired
- Logout: clear SecureStore, reset Zustand stores, navigate to (auth) group (replace, not push)
- Token refresh: Axios interceptor catches 401, refreshes token, retries original request

Biometric unlock:
- On login success: ask user to enable biometric unlock (expo-local-authentication)
- On next launch: if biometric enrolled, show biometric prompt instead of password form
- Fallback: if biometric fails 3 times, show PIN or password form

Security:
- Jailbreak/root detection: expo-device + check for common jailbreak indicators
- Certificate pinning: add to Axios for production API calls
- App lock: after 5 minutes of background, require biometric/PIN on return to foreground

TypeScript. Output: auth service, SecureStore utility, biometric hook, and auth Zustand store.

3. Offline-First Data Sync with WatermelonDB

You are a mobile offline sync expert.

Implement offline-first data synchronisation for a React Native task management app using WatermelonDB:

Database schema (schema.ts):
- tasks table: id (string), title, description, status, priority, due_date, assigned_to_id, project_id, organization_id, is_deleted, created_at, updated_at, server_updated_at
- projects table: similar structure
- sync_log table: entity, entity_id, action (create/update/delete), synced (boolean), created_at

Sync strategy:
- On app launch + network reconnect: pull changes from server (delta sync using last_sync_timestamp)
- On every mutation: write to local DB immediately (optimistic), queue sync operation
- Background sync: every 60 seconds when app is in foreground and network is available
- Conflict resolution: server_updated_at comparison → server wins if server is newer

Network state: @react-native-community/netinfo — pause sync attempts when offline, resume on reconnect

UI integration:
- Show sync status indicator (syncing / synced / pending X changes / sync error)
- Optimistic UI: mutations visible immediately even before sync
- Conflict notification: toast when a server conflict overwrites a local change

Output: WatermelonDB schema, sync service, network hook, and a task model with sync methods.

4. React Native Animations with Reanimated 3

You are a React Native animations expert using Reanimated 3 and Gesture Handler v2.

Build these production-quality animated components:

1. Swipeable task row (like iOS Mail):
   - Swipe left: reveal Delete action (red background)
   - Swipe right: reveal Complete action (green background)
   - Threshold: snap to action at 40% of row width, snap back if released before threshold
   - haptics: Haptics.impactAsync on snap
   - Implementation: Gesture.Pan() + useAnimatedStyle + withSpring

2. Drag-to-reorder list:
   - Long press activates drag mode (scale up to 1.05, shadow elevation)
   - Pan gesture moves item vertically
   - Other items animate to make space using layout animations
   - On release: snap to new position, call onReorder(from, to)

3. Animated task completion checkbox:
   - Tap: scale bounce + checkmark SVG draws with path animation
   - Colour transition: border grey → background green + checkmark white
   - Duration: 300ms with spring easing

Requirements: All animations on UI thread (worklets). No JS thread involvement during gestures.
TypeScript. Explain why each animation is worklet-safe.

5. Push Notifications

You are a React Native push notification expert.

Implement push notifications for an Expo app:

Setup:
- expo-notifications: request permissions on first launch (after user is onboarded, not on first open)
- expo-device: check if physical device (simulators cannot receive push notifications)
- Register push token with backend API: POST /api/devices/register { token, platform, deviceId }
- Re-register token on app update (token can change)

Notification handling:
- Foreground: in-app banner using expo-notifications setNotificationHandler (custom UI, not system banner)
- Background tap: useLastNotificationResponse → navigate to relevant screen based on notification data
- Deep link in notification: { type: 'task', taskId: '123' } → navigate to /task/123

Server-side token management:
- Store tokens per user per device (one user may have multiple devices)
- Remove stale tokens: handle DeviceNotRegistered error from FCM/APNs → delete from DB
- Notification categories: task_assigned, task_due, comment_added, project_update

Local notifications:
- Schedule local reminder for tasks with due dates (expo-notifications scheduleNotificationAsync)
- Cancel on task completion or deletion

Output: notification service, permission hook, background handler setup, and token registration API route.

6. Performance Optimisation

You are a React Native performance engineer.

Optimise this task list screen with 500+ items:

[PASTE SCREEN CODE]

Fix every performance issue:

1. FlatList optimisation:
   - keyExtractor: use stable string IDs (not array index)
   - getItemLayout: provide fixed height if rows have consistent height (eliminates measurement overhead)
   - removeClippedSubviews: true on Android
   - maxToRenderPerBatch: 10, windowSize: 5, initialNumToRender: 15
   - ItemSeparatorComponent instead of margin on items

2. Re-render prevention:
   - Wrap list item in React.memo() with custom areEqual comparator
   - Extract renderItem to a stable reference (useCallback or component definition outside)
   - Use Zustand selectors to subscribe only to the specific slice each item needs

3. Image optimisation:
   - Replace Image with expo-image: blurhash placeholder, priority hint, contentFit
   - Disable image animation on initial load (it causes jank on mount)

4. Interaction responsiveness:
   - Move filter/sort computation to useMemo
   - Defer non-critical renders with useTransition (React 19)

5. JS thread profiling: show how to use React Native DevTools and Flashlight to measure before/after

Output: optimised screen code with inline comments explaining each change.

7. Good vs Bad React Native Prompts

Task	❌ Bad Prompt	✅ Good Prompt
Animation	"Animate a button in React Native"	"Build a React Native button with Reanimated 3: tap → scale to 0.95 with withSpring, release → scale back to 1. Add haptic feedback on press. worklet-safe — no JS thread involvement. TypeScript, Expo SDK 52."
Auth	"Add login to my app"	"Implement React Native login with Expo: store JWT in expo-secure-store (not AsyncStorage), biometric unlock with expo-local-authentication, Axios interceptor for token refresh on 401, and navigate with router.replace() on login/logout to prevent back-navigation to auth screens."
Performance	"Make my list faster"	"Optimise my FlatList with 500 tasks: add getItemLayout for fixed 72px row height, wrap TaskRow in React.memo with custom comparator, move renderItem to useCallback, add removeClippedSubviews on Android. Show before/after with Flashlight benchmark command."

Generate a custom React Native prompt → Try PromptPrepare free