10 Battle-Tested Prompts for React Native: Components, Navigation, and API Integration

Introduction

If you're a mobile developer working with React Native, you've probably noticed that AI assistants have become an indispensable part of your daily workflow. But here's the thing — most developers use generic prompts like "write a React Native component" and get back mediocre code. The real power lies in crafting prompts that produce production-ready, optimized, and well-structured results.

I've been using React Native since version 0.59, and over the past two years, I've refined a set of prompts that consistently save me hours of work. These aren't theoretical examples — they're prompts I use daily when building real apps, handling navigation flows, and integrating third-party APIs. Each prompt is battle-tested, includes a real usage scenario, and follows the principle of least surprise: the output requires minimal editing.

In this article, I'll share 10 prompts organized into three categories: UI components, navigation, and API integration. You'll get the exact prompt text, a concrete example of how I use it, and practical tips to adapt it to your own projects. Let's dive in.

Why Your Prompts Need Structure

Before we get to the prompts, let's establish a baseline. A good prompt for React Native code should:

• Specify the framework version (e.g., React Native 0.76, Expo SDK 52)
• Define the component's props and types
• Include styling preferences (StyleSheet, Tailwind via NativeWind, or Styled Components)
• Mention performance constraints (memoization, FlatList optimization)
• State the expected behavior (loading states, error handling, accessibility)

All prompts below follow this structure. Adjust the library versions to match your project's package.json.

UI Components: Prompts 1–4

1. Reusable Button Component with Loading State

Prompt:

Create a reusable AppButton component for React Native 0.76 using TypeScript. It should accept props: title (string), onPress (function), variant ('primary'

| 'secondary' | 'danger'), loading (boolean), disabled (boolean), and style (optional ViewStyle). When loading is true, show an ActivityIndicator and disable touch. Use useCallback for the press handler. Style with StyleSheet.create. Include accessibility labels.

Usage example: I use this component in every screen that needs a call-to-action. The loading state prevents double taps during network requests — a common source of bugs in production apps.

Output quality: The generated component typically includes proper TypeScript interfaces, memoized handlers, and a clean separation of styles. I usually add an animated press effect (scale down on press) manually, but the baseline is solid.

2. FlatList with Pull-to-Refresh and Infinite Scroll

Prompt:

Generate a PaginatedList component using React Native's FlatList. It should implement pull-to-refresh via onRefresh and infinite scroll via onEndReached. Props: fetchItems (async function returning an array of items), renderItem (React component), keyExtractor function. Show a RefreshControl spinner during refresh, and a footer component with ActivityIndicator when loading more pages. Use useCallback for handlers and useMemo for the data array. Handle errors by showing a retry button.

Usage example: I use this for any screen that displays a list of items — user feeds, product catalogs, chat message history. The prompt handles the most common pitfalls: duplicate items on reload, missing keys, and memory leaks from unmounted components.

3. Form Input with Validation (TextInput Wrapper)

Prompt:

Build a FormField component wrapping React Native's TextInput. Props: label (string), value (string), onChangeText, error (string | null), secureTextEntry (boolean), keyboardType (default 'default'). Display the label above the input, show the error message in red below the input, and apply a red border when error is present. Handle secureTextEntry with a toggle icon (eye open/closed). Use useState for the secure entry toggle. Style with StyleSheet.

Usage example: I use this in login, registration, and profile editing screens. The built-in error display saves me from writing repetitive validation logic for each form. I pair it with a custom useForm hook that manages field states and validation rules.

4. Animated Modal (Bottom Sheet Alternative)

Prompt:

Create a custom BottomModal component using React Native's Animated API and Modal from 'react-native'. Props: visible (boolean), onClose (function), children (ReactNode). When visible becomes true, animate the modal sliding up from the bottom (translateY from 300 to 0) with a duration of 300ms. Add a semi-transparent backdrop that fades in (opacity 0 to 0.5). When closing, reverse the animation. Use useRef for the Animated.Value. Include a gesture responder area on the backdrop to trigger onClose.

Usage example: I use this for confirmation dialogs, action sheets, and filter panels. It's lightweight (no third-party library), and the animation feels native on both iOS and Android.

Navigation: Prompts 5–7

5. React Navigation Stack Setup with TypeScript

Prompt:

Generate a complete React Navigation setup for a stack navigator using @react-navigation/native v6 and @react-navigation/native-stack. Define a TypeScript type RootStackParamList with three screens: Home (no params), Details (params: { id: number; title: string }), and Settings (params: { userId: string }). Create a NavigationContainer wrapping a createNativeStackNavigator. Set screen options: header style with backgroundColor '#6200ee', header tint color white, animation 'slide_from_right'. Export the typed useNavigation and useRoute hooks for type safety.

Usage example: I use this as the foundation for every new project. The typed navigation prevents the common "undefined is not an object" errors when passing params between screens.

6. Tab Navigator with Badge Icons

Prompt:

Create a bottom tab navigator using @react-navigation/bottom-tabs v6 with four tabs: Home (icon: home), Search (icon: search), Notifications (icon: bell), Profile (icon: person). Use react-native-vector-icons/MaterialIcons for icons. Add a badge on the Notifications tab showing unread count (pass via notificationsBadge in tabBarBadge option). Style the active tab icon color '#6200ee', inactive '#757575'. Use TypeScript with a RootTabParamList type. Include a useEffect that simulates fetching unread count.

Usage example: I use this in social apps and e-commerce apps where the bottom tab is the primary navigation pattern. The badge feature is often requested by product managers, and this prompt gets it right in one shot.

7. Deep Linking Configuration

Prompt:

Implement deep linking for a React Native app using React Navigation's linking configuration. Define a linking object with prefixes: ['myapp://', 'https://myapp.com']. Map paths to screens: '/' -> Home, '/product/:id' -> ProductDetails (with param id), '/profile/:userId' -> Profile. Handle a fallback route for unknown paths. Create a custom useDeepLink hook that returns the initial URL and a function to navigate programmatically. Use useEffect to handle incoming links when the app is in the foreground.

Usage example: I use this for marketing campaigns and push notifications. When a user taps a notification, the deep link opens the correct screen directly. The fallback route prevents crashes from malformed URLs.

API Integration: Prompts 8–10

8. Custom Hook for Fetching Data (useFetch)

Prompt:

Write a useFetch custom hook in TypeScript for React Native. It should accept a URL string and an options object (method, headers, body). Return: data (generic type T

| null), loading (boolean), error (string | null), refetch (function to re-run the request). Use useState for data/loading/error, useEffect to trigger the fetch on mount, and useCallback for refetch. Handle aborting the request on unmount using AbortController. Parse JSON response. Catch network errors and non-2xx status codes.

Usage example: I use this hook in almost every screen that fetches data from an API. The AbortController cleanup prevents memory leaks — a common issue in React Native apps where users navigate quickly between screens. ASI Biont supports connecting to external APIs like RESTful services, allowing you to build data-driven mobile apps without backend complexity — learn more at asibiont.com/courses.

9. Axios Instance with Interceptors

Prompt:

Create a pre-configured Axios instance for a React Native app. Set baseURL to 'https://api.example.com/v1', timeout to 10000ms. Add a request interceptor that attaches an Authorization header from AsyncStorage (get token with AsyncStorage.getItem('authToken')). Add a response interceptor that catches 401 errors and triggers a token refresh flow (call a /refresh endpoint, store new token, retry original request). Handle network errors by returning a user-friendly message. Export the instance as default.

Usage example: I use this in apps that require authentication. The automatic token refresh prevents users from being logged out unexpectedly. The 401 interceptor especially saves debugging time when tokens expire mid-session.

10. GraphQL Query with Apollo Client

Prompt:

Set up Apollo Client in a React Native app. Install @apollo/client and graphql. Create an ApolloClient instance with uri 'https://api.example.com/graphql' and an in-memory cache. Write a useGetUser query hook that fetches a user by ID: query GetUser($id: ID!) { user(id: $id) { id name email posts { title } } }. Use TypeScript with generated types from GraphQL Code Generator. Handle loading and error states in the component.

Usage example: I use this in apps that already have a GraphQL backend (e.g., Shopify, Hasura, or custom Node.js servers). The generated types eliminate the guesswork from query responses.

Practical Comparison Table

Conclusion

These 10 prompts have become an integral part of my React Native development workflow. The key takeaway is simple: the more specific your prompt, the better the output. Include framework versions, TypeScript types, expected behavior, and styling preferences. Don't settle for generic code — push the AI to generate production-ready components that handle edge cases.

Start by integrating the UI component prompts (1–4) into your current project. Then, when you set up navigation or add API calls, use prompts 5–10 as templates. Over time, you'll develop your own library of prompts tailored to your specific app architecture. The efficiency gains are real — I've cut my boilerplate writing time by roughly 40% since adopting this approach.

Remember to review the generated code and adjust it to your project's specific needs. No prompt is perfect, but a well-crafted one gets you 90% of the way there. Happy coding!