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](https://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 | Prompt Category | Time Saved (per use) | Common Mistakes Avoided | Best For | |-----------------|----------------------|-------------------------|----------| | UI Components | 15–30 min | Missing loading states, accessibility | Rapid prototyping | | Navigation | 20–40 min | Type mismatches, missing screen options | New project setup | | API Integration | 30–60 min | Memory leaks, token expiry | Data-heavy apps | ## 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!

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

Comments

Recent articles

Sendsay + ASI Biont AI Agent: Smart Email Automation Without Code and Without Waiting

How to Automate YouTube Analytics and Content Moderation with the ASI Biont AI Agent: A No-Code Integration Guide

Mastering Industrial Safety in 2026: A Practical Guide to FZ-116 Compliance and Rostechnadzor Exams with Asibiont

Gigabyte GeForce RTX 5050 OC Low Profile (8 GB) Review: A Developer's Honest Take on a Compact Workhorse

Listen Labs Raises $69M After Viral Billboard Hiring Stunt: The New Paradigm of AI-Driven Customer Interviews at Scale

3 New to Paramount+ Shows You Need to Binge-Watch This Weekend (July 3-5, 2026)

Kingdom Come: Deliverance Gets an Official Board Game – A Developer's Perspective on the Transition from Digital to Analog

Prometheus + ASI Biont: An AI Agent That Writes Its Own Code for Monitoring, Alerting, and Dashboards

Mastering the Boardroom: Why the Corporate Governance — Board of Directors and Corporate Governance Course Is Your Strategic Edge in 2026