From Navigator to Notifications: 10 Production-Ready React Native Prompts That Actually Save Time
Every React Native developer knows the drill: you've built a beautiful screen, wired up the navigation, and then the product manager asks for push notifications at 4:45 PM on a Friday. Suddenly you're knee-deep in Firebase Cloud Messaging (FCM) configuration, Android channel setup, and iOS notification permissions. What if you could skip the boilerplate and jump straight to working code? That's exactly what these prompts are for.
I've spent the last three years building cross-platform apps with React Native, and I've learned that the right prompt can turn an hour of Stack Overflow scrounging into a five-minute AI-assisted session. This isn't a list of theoretical prompts—these are battle-tested templates I've used in real projects, from a food delivery app with live order tracking to a fitness tracker with daily reminders. Each one is designed to solve a specific problem you'll actually face in production.
Whether you're just starting with React Native or you've shipped apps to both app stores, these prompts will help you write cleaner code, avoid common pitfalls, and ship faster. Let's dive in.
1. Kickstart a New Project with a Solid Folder Structure
The Problem: You're starting a fresh React Native app and you want a clean, scalable structure from day one. But you're tired of manually creating folders and moving files around.
The Prompt:
Act as a senior React Native architect. Create a production-ready folder structure for a new app that includes:
- src/ with subfolders for components, screens, navigation, services, hooks, utils, and assets
- A root App.tsx that sets up React Navigation (Native Stack) with a minimal Home screen
- A sample service file that uses fetch to call a public API (e.g., jsonplaceholder.typicode.com)
- Proper TypeScript types for the navigation stack
Explain the purpose of each folder and how to extend the structure.
Example Result: The AI generates a clear structure like this:
src/
├── components/ # Reusable UI components
├── screens/ # Screen components (Home, Details, etc.)
├── navigation/ # Stack and Tab navigators
├── services/ # API calls and business logic
├── hooks/ # Custom React hooks
├── utils/ # Helper functions and constants
└── assets/ # Images, fonts, etc.
It also provides a RootNavigator.tsx with TypeScript types for the param list, and a api.ts file with a typed fetch call. This prompt saves you about 30 minutes of manual setup and ensures consistency across your team.
2. Master React Navigation with TypeScript
The Problem: You're using React Navigation and you keep running into type errors or you're not sure how to pass params correctly.
The Prompt:
I'm using React Navigation v6 with TypeScript in my React Native app. I need to add a new screen called 'Profile' that receives a user ID as a param. Show me:
- The updated RootStackParamList type
- The screen component that uses the route prop to get the user ID
- How to navigate to this screen from a list item, passing the ID
- How to set the screen title dynamically based on the user ID
Include code snippets for each part.
Example Result: The AI provides a complete, type-safe implementation:
// types.ts
export type RootStackParamList = {
Home: undefined;
Profile: { userId: string };
};
// ProfileScreen.tsx
import { RouteProp } from '@react-navigation/native';
import { RootStackParamList } from './types';
type ProfileRouteProp = RouteProp<RootStackParamList, 'Profile'>;
const ProfileScreen = ({ route }: { route: ProfileRouteProp }) => {
const { userId } = route.params;
return <Text>User ID: {userId}</Text>;
};
// Navigating from Home
navigation.navigate('Profile', { userId: item.id });
This prompt eliminates guesswork and ensures your navigation is fully typed, which catches errors at compile time rather than runtime.
3. Build a Reusable API Client with Token Refresh
The Problem: Your app needs to handle authentication tokens that expire, and you want a clean way to refresh them without duplicating logic.
The Prompt:
I need a robust API client for my React Native app using axios. Requirements:
- Base URL from an environment variable
- Attach a bearer token from AsyncStorage to every request
- Automatically refresh the token when a 401 response is received, using a refresh token and a /refresh endpoint
- Handle concurrent requests during refresh (queue them)
- Provide a clean error handling mechanism
Write the full implementation with TypeScript.
Example Result: The AI generates a custom apiClient with interceptors, including a token refresh queue using a promise-based approach. It also shows how to handle the case where refresh fails, logging the user out. This is a classic problem, and having a ready-made solution saves you from debugging race conditions.
4. Implement Dark Mode with React Navigation & Appearance API
The Problem: You want to support dark mode in your app, but you're not sure how to switch themes dynamically.
The Prompt:
Implement dark mode in my React Native app using React Navigation and the Appearance API. I want to:
- Define light and dark themes with primary, background, text colors
- Use the useColorScheme hook to detect the system preference
- Allow the user to override the system setting with a toggle in the app
- Persist the preference in AsyncStorage
Provide the full code for ThemeContext, a toggle component, and how to integrate with React Navigation.
Example Result: The AI provides a ThemeContext that manages the current theme, a toggleTheme function, and a custom useTheme hook. It also shows how to wrap your app in NavigationContainer with the theme prop. This is a common feature that can be surprisingly tricky to get right, and this prompt gives you a solid foundation.
5. Set Up Push Notifications with Firebase Cloud Messaging (FCM)
The Problem: You need to add push notifications to your app, but you're overwhelmed by the setup steps and platform-specific requirements.
The Prompt:
I'm adding push notifications to my React Native app using @react-native-firebase/messaging. I need to:
- Set up Firebase in my project (both Android and iOS)
- Request notification permissions and get the FCM token
- Handle foreground messages (show a local notification)
- Handle background/quit state messages (navigate to a specific screen on press)
- Send a test notification from the Firebase console
Provide step-by-step code for each part, including the required Android manifest and iOS entitlements.
Example Result: The AI gives you a comprehensive guide, including the messaging().onMessage listener, messaging().getToken(), and how to use NavigationContainer ref to handle navigation on notification press. It also reminds you to add android:postNotifications permission to the manifest (for Android 13+). This is a perfect example of a prompt that saves you from reading multiple blog posts and official docs.
6. State Management Showdown: Choosing Between Redux Toolkit and Zustand
The Problem: You're starting a new project and can't decide which state management library to use.
The Prompt:
Compare Redux Toolkit and Zustand for a React Native app with a shopping cart. Consider:
- Bundle size impact
- Learning curve and developer experience
- Performance with frequent updates
- Middleware and debugging tools
Give a recommendation based on the app's complexity and team size. Provide a simple cart implementation in both libraries.
Example Result: The AI gives a balanced comparison, noting that Redux Toolkit is more verbose but offers a standardized pattern, while Zustand is lighter and more flexible. It then shows a minimal cart store in Zustand (about 10 lines) and a Redux Toolkit slice (about 30 lines). This helps you make an informed decision without spending hours researching.
7. Optimize FlatList Performance for Large Lists
The Problem: Your app has a long list of items and it's laggy, especially on older devices.
The Prompt:
My React Native app has a FlatList that renders 1000+ items, and it's slow. Optimize it by:
- Using React.memo on list items
- Implementing getItemLayout for fixed-height rows
- Using keyExtractor properly
- Avoiding inline functions in render
- Considering windowSize and maxToRenderPerBatch settings
Provide the optimized code and explain each optimization.
Example Result: The AI provides a complete example with React.memo, getItemLayout, and the recommended FlatList props. It also explains why these optimizations are important, helping you understand the underlying performance principles.
8. Animate Screen Transitions with Reanimated 3
The Problem: You want to add smooth animations to your app, but you're not familiar with the Reanimated API.
The Prompt:
I want to add a shared element transition between a list screen and a detail screen using Reanimated 3 in React Native. The list shows product images, and when clicked, the image should expand to the detail screen. Provide the full implementation, including:
- Setting up Reanimated 3 and its babel plugin
- Using shared values and withTiming
- Implementing the transition with useAnimatedStyle and Animated.View
- Handling the shared element with a custom component
Include code for both screens.
Example Result: The AI generates a working example with a SharedElement component that animates the image position and scale. It also mentions the need to wrap the app in GestureHandlerRootView. This is an advanced feature that would take hours to learn on your own.
9. Handle Deep Links and Universal Links
The Problem: You need to support deep linking so users can open specific screens from URLs or push notifications.
The Prompt:
Add deep linking to my React Native app using React Navigation. I want to:
- Handle custom URL scheme (e.g., myapp://profile/123)
- Handle universal links on iOS and app links on Android
- Set up the linking config in React Navigation with prefix and path mapping
- Test deep linking in development and production
Provide the code and configuration for both platforms.
Example Result: The AI gives you the exact linking configuration for React Navigation, including how to map /profile/:id to the Profile screen. It also explains how to set up the associated domains on iOS and intent filters on Android. This is a niche topic that often requires digging through multiple docs.
10. Write a Custom Hook for Form Validation with Yup
The Problem: You're tired of writing repetitive form validation logic in every screen.
The Prompt:
Create a reusable useForm hook in React Native that integrates with Yup for validation. The hook should:
- Accept an initial values object and a Yup validation schema
- Provide handleChange, handleBlur, and handleSubmit functions
- Return errors and a submit function that validates before submitting
- Support async validation for fields like email uniqueness
Write the hook with TypeScript and show an example login form using it.
Example Result: The AI produces a clean useForm hook that uses useState and useCallback, and it shows a login form component using the hook. This is a great way to standardize form handling across your app and reduce boilerplate.
Final Thoughts
These 10 prompts are my go-to toolkit for React Native development. They cover the most common tasks—from setting up a new project to implementing advance features like deep links and push notifications. The key is to treat them as starting points: adjust them to your specific project context, and you'll get even better results.
I've used these prompts in real projects, and they've saved me countless hours. For example, the API client with token refresh was a game-changer for a client app that required secure access to a REST API. The FlatList optimization prompt helped me fix a performance issue that was causing user complaints in an e-commerce app.
Your turn: pick one prompt from this list and try it in your next React Native task. You'll be amazed at how quickly you can go from 'I have no idea how to do this' to 'it's already working.' And if you have your own favorite prompts, share them in the comments—I'm always looking to expand my toolkit.
Happy coding!
Comments