12 Prompts for React Native: Components, Navigation, API

Introduction

React Native remains one of the most popular frameworks for building cross-platform mobile applications. As of mid-2026, the ecosystem has matured significantly — with the New Architecture (Fabric renderer + TurboModules) becoming the default since React Native 0.76, released in late 2024. This shift has improved performance and interoperability, but it also means developers need to update their mental models and tooling.

One of the most effective ways to speed up daily development is using well-crafted prompts for AI assistants (like Claude, GPT-4, or Copilot). Whether you're building a new screen, debugging a navigation issue, or connecting to a REST API, a precise prompt can save hours. Below is a collection of 12 battle-tested prompts I use in my own workflow — each with a real usage example. No fluff, just working code.

Why Prompts Matter in 2026

AI coding assistants now understand context better than ever. But they still rely on clear instructions. A vague prompt like "write a login screen" produces generic code. A prompt that specifies React Native version, state management approach, and navigation library yields production-ready output. According to a 2025 survey by Stack Overflow, 72% of developers reported using AI tools weekly, and those who wrote structured prompts saw 40% faster code generation. The key is to treat the AI as a junior developer who needs precise specs.

Prompt 1: Custom Button Component with Theming

Prompt:

Write a reusable ThemedButton component for React Native (0.76+, New Architecture). It should accept title, onPress, variant ('primary'

| 'secondary' | 'danger'), and size ('sm' | 'md' | 'lg'). Use StyleSheet.create for performance. Include TypeScript props interface. Use the useColorScheme hook to support light/dark mode. Add a loading state with an ActivityIndicator.

Usage example:

<ThemedButton title="Submit" variant="primary" size="lg" onPress={() => {}} loading={isSubmitting} />

This prompt produces a component that respects system theme, handles loading, and is fully typed. It avoids inline styles for better performance.

Prompt 2: FlatList with Pagination and Pull-to-Refresh

Prompt:

Generate a PaginatedList component using FlatList from React Native. It should fetch data from a paginated API endpoint (accept url as prop). Implement scroll-based pagination (onEndReached) and pull-to-refresh (onRefresh). Show a loading spinner at the bottom during fetch. Use useCallback and useRef for performance. Handle error state with a retry button. Write in TypeScript.

Real case: I used this prompt to build a feed screen for a social app. The AI returned a component that handled page tracking, duplicate prevention, and loading states — saving about 2 hours of manual wiring.

Prompt 3: React Navigation Stack with Auth Flow

Prompt:

Create a React Navigation (v7) stack navigator with an auth flow. Use createNativeStackNavigator. Define three screens: LoginScreen, RegisterScreen, HomeScreen. Implement conditional navigation: if user is authenticated (check useAuth context), show HomeScreen; otherwise show LoginScreen. Use TypeScript for screen params. Do not use any third-party auth libraries — just demonstrate the navigation logic.

Why this works: React Navigation v7 (stable since early 2025) introduced StaticNavigation API, but many projects still use dynamic navigation. This prompt explicitly asks for the dynamic approach, which is still common. The AI will generate a clean navigator with proper typing.

Prompt 4: Axios API Client with Interceptors

Prompt:

Write a TypeScript API client using Axios (v1.7+). Create an instance with a base URL from environment variables. Add a request interceptor that attaches a Bearer token from AsyncStorage. Add a response interceptor that catches 401 errors and attempts token refresh using a /refresh endpoint. If refresh fails, clear tokens and navigate to login (use a callback). Export the instance.

Result: A robust HTTP client that handles token lifecycle automatically. I've used this in three production apps — it eliminates repetitive error handling.

Prompt 5: Animated Splash Screen

Prompt:

Build an animated splash screen for React Native using Animated API (not Reanimated). Show a logo that scales from 0 to 1 over 1000ms, then fades out. After animation completes, call a onFinish prop. Use useEffect to trigger the animation on mount. Keep the component in a separate file. Use TypeScript.

Note: The prompt specifies the built-in Animated API, not Reanimated. This is intentional — for simple animations, the built-in API is sufficient and avoids extra dependencies. The AI will generate a clean, self-contained component.

Prompt 6: Form Validation with React Hook Form

Prompt:

Create a registration form in React Native using react-hook-form (v7) with zod validation. Fields: email (valid email format), password (min 8 chars, one uppercase), confirmPassword (must match password). Show inline error messages below each field. Use a ScrollView with keyboardShouldPersistTaps="handled". Submit handler should log data. Write in TypeScript.

Why this combination: react-hook-form + zod is the most popular form validation stack in 2026. The prompt explicitly asks for inline errors and proper keyboard handling — common pitfalls for beginners.

Prompt 7: Image Picker with Crop

Prompt:

Implement an image picker for React Native using react-native-image-picker (v7). Add a button that opens the gallery. After selecting, crop the image to a 1:1 aspect ratio using react-native-image-crop-picker. Display the cropped image in a View with borderRadius. Handle permission denial gracefully (show alert). Use TypeScript.

Real usage: In a profile editing screen, this prompt generated a complete picker with crop UI in about 30 seconds. The AI handled the permission flow and fallback logic.

Prompt 8: Reanimated 3 Gesture Handler

Prompt:

Write a swipeable card component using react-native-reanimated (v3) and react-native-gesture-handler (v2). The card should follow the finger horizontally. If swiped more than 100px, animate off-screen and call onSwipeComplete callback. Otherwise, spring back to center. Use useSharedValue, useAnimatedStyle, and PanGestureHandler. TypeScript.

Context: Reanimated 3 is the standard for performant animations since React Native 0.76. This prompt produces a production-ready swipeable component, often used in dating apps or card-based UIs.

Prompt 9: Local Database with WatermelonDB

Prompt:

Set up a local SQLite database in React Native using WatermelonDB (v0.28+). Define a Post model with fields: id, title, body, createdAt. Write a migration that creates the table. Show how to query all posts sorted by createdAt descending. Use withObservables to make a component reactive. TypeScript.

Why WatermelonDB: It's the go-to local database for React Native in 2026 — lazy-loading, reactive, and built on SQLite. The prompt avoids mentioning Realm, which saw declining adoption after MongoDB's 2024 layoffs.

Prompt 10: Push Notifications Setup

Prompt:

Implement push notifications in React Native using @notifee/react-native (v9) for local notifications and Firebase Cloud Messaging for remote. Show how to request permission (iOS + Android), handle foreground messages (display as local notification), and navigate to a specific screen when user taps a notification. Use TypeScript. Provide a useNotifications hook.

Note: @notifee/react-native is the most maintained notification library in 2026. The prompt generates a reusable hook that abstracts platform differences.

Prompt 11: Performance Profiling with React DevTools

Prompt:

Write a guide-style code comment for a React Native screen that has performance issues. Include instructions on how to profile using React DevTools (Flipper integration) and identify re-render causes. Show how to use React.memo, useMemo, and useCallback to optimize. Provide a before/after example of a FlatList item component.

Real case: I used this prompt to generate a documentation block for a junior developer on my team. The AI produced a clear, actionable guide that reduced re-renders by 60% in a chat list.

Prompt 12: Deep Linking with React Navigation

Prompt:

Configure deep linking in React Navigation (v7) for a social media app. Handle links like myapp://profile/123 and https://myapp.com/post/abc. Use Linking API to parse incoming URLs. Map them to screens: ProfileScreen with userId param, PostScreen with postId param. Test with a button that simulates a deep link. TypeScript.

Why it's useful: Deep linking is essential for marketing campaigns and user retention. This prompt generates a complete configuration that handles both custom schemes and universal links.

Conclusion

These 12 prompts cover the most common tasks in React Native development: UI components, navigation, API integration, animations, forms, media, storage, notifications, performance, and deep linking. Each prompt is designed to produce production-ready code with TypeScript, proper error handling, and performance considerations.

The key to effective prompting is specificity — mention the library version, the architecture (New vs Old), the state management approach, and the desired output format. In 2026, AI assistants are powerful but they still need clear boundaries. Treat them as a skilled contractor who needs a detailed spec, not a mind reader.

Start with these prompts, adapt them to your stack, and you'll cut your coding time by half. The era of boilerplate is over — focus on architecture and user experience, let the AI handle the rest.