10 Prompts for React Native Components, Navigation, and API Integration
React Native is the go-to framework for cross-platform mobile apps, but writing boilerplate for components, navigation, and network layers still takes up hours. AI assistants like ChatGPT, Claude, or GitHub Copilot can generate this code in seconds. The key is crafting precise prompts that follow official patterns. Below are ten prompts I use in production — each one references the official React Native and React Navigation docs, so you won't get hallucinated APIs.
1. Reusable Button with TypeScript
Prompt:
Generate a reusable Button component in React Native with TypeScript. Support variants: primary, secondary, outlined. Include loading state and accessibility role/label. Use StyleSheet.create and touchableOpacity.
When to use: Starting a design system or refactoring repeated button code.
Result: A typed component with a variant prop, a loading spinner, and proper AccessibilityInfo hints. I saved about 40 minutes on our last project by dropping this into the shared UI folder.
2. FlatList with Pull-to-Refresh and Loading States
Prompt:
Create a FlatList in React Native that fetches data from an API, shows a spinner while loading, an error message on failure, and supports pull-to-refresh. Use useState, useEffect, and ActivityIndicator. Handle empty state.
When to use: Any screen with a list of remote items — news feeds, product catalogs, chat history.
Result: A self-contained list component that manages loading, error, and data states. A junior dev on our team used it directly for a product screen, cutting debugging time significantly.
3. Custom Drawer Navigator
Prompt:
Implement a custom drawer navigator using React Navigation v6. Include a profile header, a logout button, and three screens: Home, Settings, and Profile. Use createDrawerNavigator and custom drawer content.
When to use: Apps that need a hamburger menu with a branded sidebar.
Result: A navigator with a custom DrawerContent component. This matches the React Navigation custom drawer guide.
4. Bottom Tabs with Icons
Prompt:
Set up bottom tab navigation in React Native with React Navigation. Use createBottomTabNavigator and include Home, Search, and Profile tabs. Use vector icons for each tab and set active tint color.
When to use: Standard mobile apps with primary sections.
Result: A tab navigator with react-native-vector-icons integration. According to the React Navigation docs, this is the recommended way to handle tabs.
5. API Fetch Wrapper with Error Handling
Prompt:
Write a fetch wrapper in TypeScript for React Native. It should include base URL, timeout, JSON parsing, and a custom ApiError class. Handle network errors and aborted requests.
When to use: Centralizing network calls across your app.
Result: A request() function that catches both network and HTTP errors, with a generic type parameter. This pattern reduces duplicated try/catch blocks and makes error analytics cleaner.
6. Debounced Search Hook
Prompt:
Create a custom React hook useDebouncedValue that takes a value and delay in milliseconds. Use it for search input to avoid hitting the API on every keystroke.
When to use: Search screens where API calls need to be throttled.
Result: A simple hook that returns the debounced value. In our app, we combined it with useEffect to fetch results only after the user pauses typing — this pattern reduced our API calls significantly in a recent search feature.
7. Form with Validation (react-hook-form)
Prompt:
Generate a login form in React Native using react-hook-form with zod validation. Show inline errors and call an onSubmit function. Use the Controller pattern.
When to use: Creating polished forms with real-time validation.
Result: A form with proper error messages and a Controller that works with RN's TextInput. This follows the react-hook-form documentation.
8. Dark Mode Theme Provider
Prompt:
Implement a theme provider in React Native that supports light and dark mode. Use Context API, store the theme in AsyncStorage, and provide a hook useTheme.
When to use: Apps that need system-aware theming.
Result: A ThemeProvider that wraps the app, with a useTheme hook to access colors. It respects the OS color scheme via useColorScheme().
9. WebView Screen
Prompt:
Create a React Native screen with a WebView that loads a URL, shows a loading bar at the top, and handles navigation state. Use react-native-webview.
When to use: Displaying external content like payment pages or terms of service.
Result: A reusable WebScreen component that loads external links safely. This is based on the react-native-webview docs.
10. Unit Test for a Component
Prompt:
Write a unit test using React Native Testing Library and Jest for a Button component. Test that onPress fires when pressed, and that loading disables interaction.
When to use: Adding regression tests to your UI.
Result: A test file that asserts the button's behavior. The test runs in CI and has caught two breaking changes in our codebase already.
Wrapping Up
These prompts are not magic bullets — they still rely on your ability to review and adapt the generated code. But they eliminate the tedious parts. Combine them with the official React Native documentation and React Navigation docs, and you'll ship features faster.
Try one prompt today. Replace the boilerplate with generated code, then tweak it to fit your architecture. If you have a senior dev review the output, even better.
Comments