Introduction
Building a polished mobile app with React Native requires more than just knowing the framework—it demands clear, structured prompts to generate components, implement navigation, and handle API calls efficiently. Whether you're a seasoned developer or just starting, this collection of 12 prompts will help you speed up your workflow, avoid common pitfalls, and produce production-ready code. Each prompt is designed to be copy-paste ready, with a real-world example and explanation. Let's dive in.
Section 1: UI Component Prompts
1. Prompt for a Reusable Button Component
Task: Create a customizable button with loading state, accessibility, and theme support.
Prompt:
Generate a React Native functional component named 'AppButton'. It should accept props: title (string), onPress (function), loading (boolean, default false), disabled (boolean, default false), variant ('primary'
| 'secondary' | 'outline'). Use StyleSheet for styling, support dark mode via Appearance API, and include accessibilityLabel and accessibilityRole. Show loading spinner when loading is true. Export as default.
Example usage:
<AppButton title="Submit" onPress={handleSubmit} loading={isLoading} variant="primary" />
2. Prompt for a FlatList with Pull-to-Refresh
Task: Implement a performant list with pull-to-refresh and empty state.
Prompt:
Write a React Native screen that fetches an array of objects from a mock API (use setTimeout). Display them in a FlatList with keyExtractor using id. Implement pull-to-refresh with refreshing state. Show an ActivityIndicator during initial load. If data array is empty, render a custom EmptyState component with an image and 'No items found' text. Use useCallback for renderItem.
Example output: A scrollable list of user cards that refreshes when pulled down.
3. Prompt for a Custom Modal with Animation
Task: Build a modal that slides up from the bottom with a backdrop.
Prompt:
Create a 'BottomSheetModal' component using React Native's Modal and Animated APIs. The modal should slide up from bottom when visible prop is true, with a semi-transparent backdrop that fades in. Include a draggable handle bar at top. Support children prop. Use Animated.spring for smooth animation with tension 50, friction 9. Dismiss on backdrop press.
Example: A share sheet that animates up on button press.
Section 2: Navigation Prompts
4. Prompt for Stack Navigator with Auth Flow
Task: Set up authentication-based navigation using React Navigation v6.
Prompt:
Generate a navigation setup using @react-navigation/native and @react-navigation/stack. Create two stack navigators: AuthStack (LoginScreen, RegisterScreen) and MainStack (HomeScreen, ProfileScreen). Use a context AuthContext with user state (null or object). If user is null, show AuthStack; otherwise show MainStack. Include a SplashScreen that checks async storage for token.
Example: App navigates to Login on first launch, then to Home after login.
5. Prompt for Tab Navigator with Badges
Task: Implement bottom tabs with badge counts.
Prompt:
Create a BottomTabNavigator with three tabs: Home, Notifications, Profile. Use @react-navigation/bottom-tabs. Each tab should have an icon from react-native-vector-icons/MaterialIcons. For the Notifications tab, display a badge with unread count (passed via tabBarBadge option). Style active tab color to '#6200ee' and inactive to gray.
Example: A chat app tab bar showing 5 unread messages.
Section 3: API & Data Fetching Prompts
6. Prompt for Custom useFetch Hook
Task: Create a reusable hook for GET requests with error handling.
Prompt:
Write a custom hook 'useFetch' that takes a URL string and returns { data, loading, error, refetch }. Use useState and useEffect. On mount, fetch the URL, parse JSON, set data on success, set error on failure (catch block). refetch should re-run the fetch. Use AbortController to cancel request on unmount. Handle network errors gracefully.
Example usage:
const { data, loading, error } = useFetch('https://api.example.com/users');
7. Prompt for POST Request with Form Data
Task: Implement a login form that sends credentials to an API.
Prompt:
Generate a 'LoginScreen' component with email and password TextInputs. Use a state object for form values. On submit, call a loginAPI function that uses fetch with POST method, Content-Type application/json, and body containing email and password. Handle 200 response (store token via AsyncStorage), 401 (show error 'Invalid credentials'), and network errors (show Alert). Disable button while loading.
Example: User fills form, taps Login, gets redirected on success.
8. Prompt for Infinite Scroll Pagination
Task: Load more data as user scrolls to bottom.
Prompt:
Create a 'PaginatedList' screen that fetches data from a paginated API endpoint (e.g., /items?page=1&limit=20). Use state for page, data array, hasMore boolean. On scroll end (using onEndReached of FlatList), increment page and append new items to data array. Show a footer ActivityIndicator when loading more. Stop fetching when hasMore is false.
Example: A news feed that loads 10 articles at a time.
Section 4: Advanced & Utility Prompts
9. Prompt for Dark Mode Toggle
Task: Implement theme switching with Context.
Prompt:
Build a 'ThemeContext' that provides 'theme' (light or dark) and 'toggleTheme' function. Use Appearance API to detect system preference. Store theme in AsyncStorage. Create a 'useTheme' hook that returns colors object (background, text, primary) based on current theme. Apply to a sample screen with dynamic styles.
Example: A settings screen with a toggle that switches from light to dark.
10. Prompt for Offline-First Data Sync
Task: Cache API data and show when offline.
Prompt:
Write a 'useOfflineFetch' hook that first checks @react-native-community/netinfo for connectivity. If online, fetch from API and store response in AsyncStorage. If offline, return cached data from AsyncStorage. Include a 'lastUpdated' timestamp. Show a banner 'Showing cached data' when offline. Use NetInfo.addEventListener to update connectivity state.
Example: A weather app shows last known forecast when airplane mode is on.
11. Prompt for Push Notification Setup
Task: Configure push notifications with Firebase Cloud Messaging.
Prompt:
Provide code to integrate @react-native-firebase/messaging. Request notification permission on iOS. Get FCM token on app start and log it. Handle onMessage for foreground notifications (display in-app banner). Handle onNotificationOpenedApp for background. Set up notification channel for Android in MainApplication.java. Include a sample handler for data messages.
Example: User receives a push when new content is available.
12. Prompt for Performance Optimization
Task: Optimize FlatList with memoization and lazy loading.
Prompt:
Refactor a FlatList to use React.memo for each list item, getItemLayout for fixed-height items (height 80), windowSize={5}, removeClippedSubviews={true}, maxToRenderPerBatch={10}, initialNumToRender={5}. Also use useMemo for data transformation and useCallback for onPress handlers. Measure performance with Performance Monitor.
Example: A contact list that scrolls smoothly with thousands of entries.
Conclusion
These 12 prompts cover the essential building blocks of any React Native application—from UI components and navigation to API integration and performance tuning. By using them as templates, you can save hours of boilerplate coding and focus on your app's unique logic. Experiment with each prompt, tweak the parameters to your needs, and combine them to create robust, scalable apps. Ready to level up? Start implementing one prompt today and see the difference in your development speed.
For further reading, check React Navigation official docs (https://reactnavigation.org/docs/) and React Native performance guide (https://reactnative.dev/docs/optimizing-flatlist-configuration).
Comments