ShortIQ

ShortIQ

AI

50 AI Prompts for React Native Mobile App Development

50 practical AI prompts for building React Native apps with Expo and TypeScript. Covers navigation, state management, native APIs, offline support, push notifications, authentication, performance, and App Store deployment.

June 12, 2026•ShortIQ Editorial Team

How to Use These React Native Prompts

React Native with Expo is the fastest way to build production mobile apps in JavaScript and TypeScript. These 50 prompts cover the full development lifecycle: setting up the project, navigation, state management, native device integration, offline support, push notifications, authentication, performance tuning, and App Store submission.

All prompts assume Expo SDK 51, React Native 0.74, TypeScript, and the Expo Router for file-based navigation. When using them in ChatGPT, Claude, or Copilot Chat, paste your current file and note which Expo SDK version and any SDK modules already installed. React Native APIs change significantly between SDK versions, so specifying yours avoids generated code that targets an older or newer API.

  • Specify your Expo SDK version and whether you are using Expo Go or a custom dev client
  • Paste the current file before prompts that modify navigation or state
  • Note target platforms (iOS, Android, or both) for device-specific prompts
  • For native module prompts, mention whether you can use expo-modules or need bare React Native

Project Setup and Navigation (Prompts 1-12)

Prompt 1: Create a new Expo project with TypeScript, Expo Router, NativeWind for Tailwind CSS styling, and React Query for server state. Show the package installation commands, the app.json configuration for iOS and Android bundle identifiers, the root _layout.tsx that wraps the app in providers, and a recommended folder structure for screens, components, hooks, and services.

Prompt 2: Write a complete Expo Router navigation setup with four tabs: Home, Explore, Notifications, and Profile. Each tab should have its own stack for nested navigation. Show the (tabs)/_layout.tsx with custom tab bar icons using expo-symbols, active and inactive tint colors, and a badge on the Notifications tab that reads from a global store. Prompt 3: Create an Expo Router authentication flow. Show the root _layout.tsx that reads auth state from a store and redirects between (auth) and (app) route groups. The (auth) group contains login and register screens. The (app) group contains all protected screens. Show how Expo Router handles the redirect without a flash of the wrong screen.

  • Prompt 4: Write a React Navigation stack screen with a custom header. The header shows a back button only when there is a previous screen, a title from the route params, and a right-side action button. Style the header to match a dark theme and remove the shadow on iOS.
  • Prompt 5: Create a bottom sheet navigation pattern in React Native using @gorhom/bottom-sheet. Show a screen that opens a persistent bottom sheet with snap points at 40% and 90% of screen height, contains a scrollable list inside the sheet, and dismisses on backdrop tap.
  • Prompt 6: Write a React Native drawer navigation setup using React Navigation drawer. Configure the drawer to open with a swipe from the left edge, show the user avatar and name at the top of the drawer menu, highlight the active screen in the menu, and close automatically on screen change.
  • Prompt 7: Create a React Native deep link setup for Expo that handles incoming links like myapp://product/123 and myapp://reset-password?token=abc. Show the app.json linking configuration, the Expo Router route that matches the product slug, and the hook that extracts the token from the URL for the password reset screen.
  • Prompt 8: Write a React Native splash screen setup for Expo that shows a branded splash while fonts and initial data load. Use expo-splash-screen with SplashScreen.preventAutoHideAsync(), load custom fonts with expo-font, fetch critical data, then hide the splash. Show how to avoid a white flash between splash and app.
  • Prompt 9: Create a React Native onboarding flow with three swipeable slides using a FlatList. Each slide shows a full-screen illustration, title, and description. Show page indicator dots, a Skip button that jumps to the end, a Next button, and a Get Started button on the last slide. Persist completion to AsyncStorage so the flow only shows once.
  • Prompt 10: Write a React Native tab bar with a custom floating center button. The tab bar has four regular tabs and a center FAB that opens a modal action sheet. Show how to remove the tab press behaviour from the center slot and trigger the modal instead.
  • Prompt 11: Create a React Native screen transition animation using React Navigation with shared element transitions. Show a list of cards that animate into a detail screen when tapped, with the card image expanding to fill the screen header using the Reanimated shared value pattern.
  • Prompt 12: Write a React Native header search bar that expands from a search icon to a full-width text input when tapped. The search input filters the list below in real time using a debounced value. Show the animation using Reanimated layout animations and the back-to-icon collapse when the input is cleared.

State Management, Storage, and Data (Prompts 13-26)

Prompt 13: Write a Zustand store for a React Native app with user authentication state. Include user, token, and isLoading state, a login action that calls the API and persists the token to expo-secure-store, a logout action that clears state and secure storage, and a rehydrate action called on app startup to restore the session. Add the zustand/middleware persist middleware with an AsyncStorage adapter.

Prompt 14: Create a React Query setup for a React Native Expo app. Configure the QueryClient with retry logic (2 retries, exponential backoff), 5-minute stale time for most queries, a global error handler that shows a toast for network errors, and an online/offline status monitor using expo-network that pauses queries when offline. Prompt 15: Write a React Native offline-first data pattern using WatermelonDB. Define a Post model with id, title, body, author, and synced_at fields. Show the database setup, a component that reads posts from WatermelonDB, a sync function that pulls new records from the API and upserts them locally, and a mutation that writes locally first then syncs in the background.

  • Prompt 16: Create a React Native image picker and upload flow using expo-image-picker. Show selecting an image from the library or camera, compressing it with expo-image-manipulator to under 500KB, uploading with a progress indicator using axios onUploadProgress, and displaying the uploaded image URL after completion.
  • Prompt 17: Write a React Native form with React Hook Form and Zod validation. Build a multi-field profile form with name, bio, website URL, and phone number. Show custom controlled input components compatible with React Hook Form, inline error messages, keyboard-aware scrolling with KeyboardAvoidingView, and submit handling that calls the API and shows success or error feedback.
  • Prompt 18: Create a React Native infinite scroll list using React Query and FlashList from Shopify. Fetch paginated data using useInfiniteQuery, render with FlashList for 60fps performance on long lists, show a skeleton loader for the first load and a footer spinner while loading more, and handle empty state and error state.
  • Prompt 19: Write a React Native pull-to-refresh implementation using FlashList and React Query. Show how to connect the RefreshControl component to the React Query refetch function, ensure the loading indicator dismisses after refetch completes, and handle the case where a background refetch is already in progress when the user pulls.
  • Prompt 20: Create a React Native local SQLite database setup using expo-sqlite. Define a migrations array that runs on startup, write a hook called useDatabase that provides typed query and execute functions, and show CRUD operations for a todos table including batch inserts in a transaction.
  • Prompt 21: Write a React Native background fetch task using expo-background-fetch and expo-task-manager. Register a task that runs every 15 minutes, checks for new notifications from an API, stores them locally, and updates the app badge count using expo-notifications without waking the main app.
  • Prompt 22: Create a React Native real-time data setup using WebSockets with the native WebSocket API. Show connecting to a WebSocket server on mount, sending messages, receiving and parsing JSON messages, reconnecting automatically after a disconnect with exponential backoff, and cleaning up on unmount.
  • Prompt 23: Write a React Native caching layer using MMKV for fast synchronous storage. Show storing API responses with an expiry timestamp, reading from cache before fetching if the cache is fresh, invalidating specific cache keys on mutation, and clearing all cache entries on logout.
  • Prompt 24: Create a React Native context provider for feature flags that fetches flag values from a remote config source on startup, provides them synchronously to the rest of the app using a Context with a default fallback, refreshes every 30 minutes in the background, and re-renders only components that use changed flags.
  • Prompt 25: Write a React Native analytics event tracking composable using a custom useAnalytics hook. Define typed event names and payload shapes, buffer events in memory, batch-send them to the API every 30 seconds or when the app goes to background, and include user ID and session ID on every event.
  • Prompt 26: Create a React Native app state listener that detects when the app moves between foreground, background, and inactive states using AppState. On foreground, refresh stale React Query data. On background, flush the analytics event buffer. On inactive, save any unsaved draft form data to AsyncStorage.

Auth, Notifications, Performance, and Deployment (Prompts 27-50)

Prompt 27: Write a complete biometric authentication flow for a React Native Expo app using expo-local-authentication. Check if biometric hardware is available, prompt the user to enable biometric login after password login, store the preference in expo-secure-store, and show the biometric prompt on subsequent app opens instead of the password screen.

Prompt 28: Create a React Native Google Sign-In implementation using expo-auth-session. Show the OAuth flow, extract the ID token, send it to your backend for verification, and handle the case where the user denies the Google permission request. Prompt 29: Write a React Native push notification setup using Expo Notifications. Request permission on first launch, get the Expo push token, send it to the backend API for storage, handle incoming notifications when the app is in foreground, and navigate to the relevant screen when a notification is tapped while the app is in background.

  • Prompt 30: Create a React Native local notification scheduler using expo-notifications. Schedule a daily reminder at a user-selected time, cancel and reschedule when the time changes, show a notification even when the app is closed, and include a deep link action button that opens a specific screen.
  • Prompt 31: Write a React Native performance optimisation for a heavy list screen. Use useMemo to stabilise item data, useCallback to stabilise item render functions, implement getItemLayout for FlashList to avoid layout calculations, add keyExtractor, and show how React.memo on the list item component prevents unnecessary re-renders.
  • Prompt 32: Create a React Native image optimisation setup. Use expo-image instead of the built-in Image component for disk and memory caching, show a blurhash placeholder while the full image loads, implement priority loading for above-the-fold images, and lazy-load images below the fold.
  • Prompt 33: Write a React Native Reanimated 3 scroll-based animation. A header image fades and scales down as the user scrolls, a sticky header fades in when the image is fully scrolled past, and a floating action button hides while scrolling down and reappears when scrolling up. Show the shared values and derived values.
  • Prompt 34: Create a React Native app size reduction checklist and implementation. Enable Hermes engine, configure metro.config.js to exclude unused assets, enable the new architecture, split large screens into lazy-loaded components, and show how to analyse the bundle with expo-atlas.
  • Prompt 35: Write a React Native error boundary using react-native-error-boundary. Catch render errors in any screen, show a friendly error UI with a retry button, report the error with component stack to a crash reporting service, and reset the boundary state when the user navigates to a different screen.
  • Prompt 36: Create a React Native map integration using react-native-maps. Show a MapView with user location tracking, custom marker components for a list of locations, a callout popup when a marker is tapped, clustering of nearby markers using react-native-map-clustering, and animated map movement when the selected location changes.
  • Prompt 37: Write a React Native camera integration using expo-camera. Show a full-screen camera preview, capture a photo on button press, show a preview of the captured photo with retake and confirm options, and send the confirmed photo as a base64 string to the API.
  • Prompt 38: Create a React Native barcode and QR code scanner using expo-barcode-scanner. Show the camera view with a scanning frame overlay, vibrate on successful scan, debounce scans to prevent duplicate reads, handle the result by navigating to a product detail screen with the decoded value, and request camera permission with a fallback UI.
  • Prompt 39: Write a React Native in-app purchase setup using expo-in-app-purchases. Fetch available products from the App Store or Play Store, show a pricing screen, handle purchase completion, validate the receipt on your backend before unlocking premium features, and restore previous purchases on request.
  • Prompt 40: Create a React Native unit test setup with Jest and React Native Testing Library. Write tests for a custom hook that fetches data, test that a list component renders the correct number of items, test that a button triggers the correct action when pressed, and mock expo-secure-store and AsyncStorage.
  • Prompt 41: Write a React Native end-to-end test using Maestro. Define a flow that launches the app, navigates to the login screen, enters credentials, taps Login, verifies the home screen loads, and taps a list item to open the detail screen. Show how to run the flow in CI with a GitHub Actions step.
  • Prompt 42: Create an EAS Build configuration for a React Native Expo app. Configure eas.json with development, preview, and production profiles, set environment variables per profile using EAS Secrets, configure an iOS distribution certificate and provisioning profile, and show the EAS Build command for each profile.
  • Prompt 43: Write an EAS Update (OTA update) setup for a React Native Expo app. Configure the update channel in eas.json, publish an update after a bug fix without resubmitting to the App Store, set a rollout percentage for gradual release, and show how to roll back to a previous update if the new one causes crashes.
  • Prompt 44: Create an App Store submission checklist for a React Native Expo app. Include app icon sizes for all required resolutions, screenshot requirements for each device size, privacy manifest configuration for iOS 17, required entitlements for push notifications and in-app purchases, and the EAS Submit command with App Store Connect API key.
  • Prompt 45: Write a React Native Fastlane setup for automated App Store and Play Store deployment. Show the Fastfile with lanes for beta (TestFlight and Play Store internal) and production (App Store and Play Store production), certificate management with match, and a GitHub Actions workflow that runs the production lane on a git tag.
  • Prompt 46: Create a React Native accessibility setup. Add accessibilityLabel to all interactive elements, use accessibilityRole for buttons and links, test with VoiceOver and TalkBack, ensure a minimum touch target size of 44x44 points, and implement focus management so the screen reader moves to the correct element after a modal opens.
  • Prompt 47: Write a React Native dark mode implementation that reads the system color scheme using useColorScheme, allows the user to override it in settings, stores the preference in AsyncStorage, provides a theme object to the entire app via Context, and applies theme colors to NativeWind className strings using a conditional helper.
  • Prompt 48: Create a React Native internationalisation setup using i18next and react-i18next. Configure English and Arabic translations including right-to-left layout support for Arabic, switch language at runtime, persist the language preference, and show how to handle plural forms and date formatting per locale.
  • Prompt 49: Write a React Native secure storage pattern for sensitive data. Store auth tokens in expo-secure-store with biometric protection on supported devices, fall back to AsyncStorage encryption using expo-crypto for devices without secure enclave, wipe all sensitive data on logout, and show how to detect if the device has tampered secure storage.
  • Prompt 50: Create a React Native CI/CD pipeline using GitHub Actions. Run lint, TypeScript checks, and unit tests on every pull request. On merge to main, run EAS Build for a preview build, distribute to TestFlight and Play Store internal testing using EAS Submit, and post a build status summary as a comment on the merged pull request.

FAQ

Should I use Expo or bare React Native?

Use Expo for almost all new projects. The managed workflow with Expo SDK gives you access to the vast majority of native APIs without writing native code, and EAS Build handles iOS and Android compilation in the cloud without requiring a Mac. Only choose bare React Native if you need a native module that Expo does not support, or if your project has specific native code requirements from the start.

Is React Native good for production apps in 2026?

Yes. React Native powers production apps at Meta, Microsoft, Shopify, and thousands of companies. The new architecture (JSI, Fabric, TurboModules) delivers near-native performance. Expo has matured significantly with EAS Build, EAS Update, and EAS Submit covering the full deployment lifecycle. The main trade-off compared to native development is that complex animations and GPU-heavy graphics require more care to achieve native quality.

What state management library should I use in React Native?

Use Zustand for local and global UI state — it is simple, has no boilerplate, and works well with TypeScript. Use React Query (TanStack Query) for server state: caching, background refetching, pagination, and optimistic updates. This combination covers most app needs without the complexity of Redux. Add Redux Toolkit only if you have very complex state interactions or are extending an existing Redux codebase.

Can I use Tailwind CSS with React Native?

Yes, through NativeWind, which adapts Tailwind CSS for React Native. It uses the same className prop pattern as web Tailwind and covers most common utility classes. Some CSS concepts do not translate to React Native (grid, certain flexbox variants, CSS custom properties), so you will occasionally need inline StyleSheet styles for unsupported properties. NativeWind v4 with Expo SDK 51 has the best support.

Related free tools

If you want to turn this topic into action, use one of ShortIQ's free tools for campaign planning, UTM structure, or QR distribution.

Continue Reading

Explore more guides on link shortener SaaS strategy, Bitly alternatives, and white label link management.

Free newsletter

Get new guides in your inbox

We publish practical guides on dev tooling, prompt engineering, marketing workflows, and deployment. No fluff — straight to the point.

No spam. Unsubscribe any time.

Was this article helpful?

Tell us if this guide solved the problem or what was still missing. We use this to improve the blog and only follow up if you explicitly allow it.

We use this to improve tutorials, examples, and technical depth.