Best AI Prompts for React Native Development with Cursor

TL;DR

React Native has mobile-specific requirements that generic AI prompts miss — safe areas, platform-specific APIs, touch interaction, and mobile performance constraints require explicit prompting context.
Cursor’s context-aware editing makes it effective for React Native — its understanding of your full project context produces more accurate mobile-specific code generation.
Platform-aware prompts are essential for React Native — always specify iOS and/or Android targets when generating mobile-specific components.
Mobile-specific components require specific mobile patterns — React Native components need handling for safe areas, keyboard avoidance, gesture handling, and platform variations.
Cursor’s mobile debugging assistance can accelerate problem-solving — AI-assisted debugging for mobile-specific issues requires specific error context.
Performance prompts should address mobile-specific constraints — network handling, image optimization, and memory management are critical for mobile apps.

Introduction

React Native development has a specific challenge that generic AI coding assistants often fail to address: mobile context matters. A component that works perfectly in a web React application will frequently fail on mobile because it ignores mobile-specific requirements — the notch, safe areas on modern iPhones, keyboard avoidance, gesture-based interactions, and platform-specific navigation patterns.

Cursor’s context-aware architecture makes it more effective for React Native when prompted correctly. But most developers use the same generic prompts they would for web React, which produces code that requires significant mobile-specific modifications.

This guide teaches you how to write Cursor prompts specifically for React Native development. You will learn platform-aware prompting for iOS and Android, mobile-specific component patterns, safe area and notch handling, gesture-based interaction prompts, and mobile performance optimization.

Why Mobile Context Matters for React Native AI Prompts
Platform-Aware Component Prompts
Safe Area and Notch Handling Prompts
Navigation and Screen Prompts
Gesture and Touch Interaction Prompts
Mobile Performance Optimization Prompts
Mobile Debugging Assistance Prompts
Common React Native AI Prompt Mistakes
FAQ

Why Mobile Context Matters for React Native AI Prompts

React Native apps run on devices with physical constraints and interaction patterns that web apps do not have. Understanding what makes mobile development different from web development is prerequisite to writing effective Cursor prompts for React Native.

The Safe Area Problem: Modern iPhones have notches, Dynamic Islands, and home indicators. Android phones have camera cutouts and navigation bars. Components that ignore these areas render incorrectly — content gets hidden under the notch or behind the navigation bar. Safe area handling is not optional in mobile development; it is foundational.

The Touch Interaction Problem: Mobile apps use touch gestures — swipe, pinch, long-press — that web applications do not handle. React Native’s gesture system requires specific patterns that web React developers are not familiar with.

The Platform API Problem: React Native exposes different APIs for iOS and Android. What works on one platform may fail silently on another. AI-generated code that does not specify the target platform often uses APIs that work inconsistently across platforms.

The Network Handling Problem: Mobile apps frequently lose connectivity, switch between WiFi and cellular, and operate in areas of poor coverage. Web-fetch patterns that assume consistent connectivity fail on mobile without explicit offline handling.

The Performance Problem: Mobile devices have limited memory and processing power compared to development machines. React Native apps that work perfectly in development can become sluggish or crash on actual devices if performance is not considered in development.

Platform-Aware Component Prompts

The most important modification for React Native prompts is adding platform context. Always specify iOS and/or Android targets and the specific mobile patterns your components need.

Platform-Aware Component Prompt:

Generate a React Native component for [COMPONENT NAME] with full mobile context.

TARGET PLATFORMS: [iOS / Android / Both]

MOBILE CONTEXT:
- Target devices: [iPhone 14 Pro / Pixel 7 / iPad / Specific models if known]
- iOS version support: [minimum iOS version]
- Android version support: [minimum Android version]
- Navigation pattern: [Stack / Tab / Drawer — what navigation structure does this component live in]

COMPONENT REQUIREMENTS:

1. PROPS INTERFACE
   Define the complete TypeScript props interface:
   [LIST PROPS WITH TYPES]

2. MOBILE-SPECIFIC HANDLING:
   - Safe area handling: [YES — needs to respect notch/home indicator]
   - Keyboard avoidance: [YES/NO]
   - Platform-specific rendering: [iOS vs Android differences if any]

3. STATE MANAGEMENT:
   - Local state: [useState/useReducer]
   - Shared state: [Context/Redux/Zustand — if applicable]
   - Side effects: [useEffect — what triggers re-renders]

4. ACCESSIBILITY:
   - Accessibility labels: [YES — describe for screen readers]
   - Touch targets: [minimum 44x44 points]
   - Dynamic type support: [YES/NO]

5. INTERACTIONS:
   - Touch handlers: [onPress / onLongPress / swipe / etc.]
   - Keyboard handling: [KeyboardAvoidingView / ScrollView keyboardShouldPersistTaps]

Please generate:
1. Complete TypeScript component with proper React Native patterns
2. Platform-specific code blocks using Platform.select() where needed
3. Proper TypeScript types for all props and state
4. Accessibility compliance with WCAG mobile standards

Safe Area and Notch Handling Prompts

Safe area handling is the most commonly missed mobile-specific requirement in AI-generated React Native code. Explicitly prompting for safe areas produces correct mobile output.

Safe Area Component Prompt:

Generate a React Native screen component with proper safe area handling.

SCREEN PURPOSE: [WHAT THIS SCREEN DOES]

TARGET PLATFORMS: [iOS / Android / Both]

SAFE AREA REQUIREMENTS:
- iOS notch handling: [YES — for iPhone X and later]
- iOS home indicator: [Avoid placing interactive elements in home indicator area]
- Android cutout handling: [YES — for phones with camera cutouts]
- Navigation bar padding: [YES — Android navigation bar]

LAYOUT STRUCTURE:
- Header: [Fixed / Scrollable / None]
- Main content: [What goes here]
- Footer/Tab bar: [YES/NO — if YES, needs bottom safe area padding]

CONTENT SCROLLING:
- Does content scroll: [YES/NO]
- ScrollView vs FlatList: [FlatList for lists, ScrollView for static content]
- Pull-to-refresh: [YES/NO]
- Keyboard-aware scrolling: [YES — if form inputs exist]

PLATFORM SPECIFIC:
iOS:
- Use SafeAreaView from react-native-safe-area-context
- Apply paddingTop for notch, paddingBottom for home indicator

Android:
- Use StatusBar.currentHeight for status bar
- Consider WindowInsets for navigation bar

Generate a complete screen component with:
1. SafeAreaView wrapper with appropriate edges
2. StatusBar handling for each platform
3. KeyboardAvoidingView if keyboard interactions exist
4. Scrollable content area with proper keyboard offset
5. Accessibility scrollViewProps for screen reader navigation

React Native navigation requires specific patterns that differ significantly from web routing. Cursor prompts should specify the navigation structure.

Navigation-Aware Screen Prompt:

Generate a React Native screen with proper navigation integration.

TARGET: [SCREEN NAME] screen in a [React Navigation — Stack / Tab / Drawer] navigator

NAVIGATION CONTEXT:
- Navigator type: [Stack Navigator / Tab Navigator / Drawer Navigator]
- Navigation library: [React Navigation v6 / v7]
- Screen options: [headerShown / title / presentation — any specific options]
- Params passed to this screen: [LIST PARAMS WITH TYPES]

SCREEN BEHAVIOR:
- On load: [What happens when screen mounts]
- On focus: [Any actions when user navigates to this screen]
- On blur: [Any cleanup when user leaves screen]
- Back behavior: [What happens on back gesture/button]

NAVIGATION ACTIONS:
- Navigate to other screens: [LIST SCREENS AND WHEN TO NAVIGATE]
- Pass params: [How params are passed]
- Go back: [When to use goBack()]

HEADER CONFIGURATION (if applicable):
- Title: [Static / Dynamic based on props/data]
- Header style: [Platform-specific styling]
- Header right/left buttons: [Any custom buttons and their actions]

Generate:
1. Complete screen component with useNavigation and useRoute hooks
2. TypeScript types for navigation params
3. Navigation event handlers (focus, blur, beforeRemove)
4. Proper TypeScript types for the navigation props
5. Any required navigation type guards

Gesture and Touch Interaction Prompts

Mobile apps use touch gestures that web applications do not. Cursor prompts for gesture handling should specify the exact interaction patterns required.

Gesture Interaction Prompt:

Generate a React Native component with touch gesture handling.

COMPONENT PURPOSE: [WHAT THIS COMPONENT DOES]

INTERACTION REQUIREMENTS:

1. TOUCH GESTURES:
   - Tap: [YES/NO — what happens on tap]
   - Long press: [YES/NO — duration and action]
   - Swipe: [YES/NO — direction (horizontal/vertical) and action]
   - Pinch: [YES/NO — for zoom/type of interaction]
   - Pan: [YES/NO — for drag/scroll/type]

2. GESTURE LIBRARY:
   - react-native-gesture-handler: [YES — required for complex gestures]
   - react-native-reanimated: [YES — for gesture animations]
   - Built-in Touchable components: [TouchableOpacity / Pressable — for simple taps]

3. ANIMATION REQUIREMENTS:
   - What should animate: [The element / gesture response]
   - Animation type: [Spring / Timing / Layout animation]
   - Duration/config: [Specific animation parameters]

4. HAPTIC FEEDBACK (if applicable):
   - Should provide haptic feedback: [YES/NO]
   - When: [on gesture / on threshold / etc.]

5. MOBILE CONTEXT:
   - Gesture responder lifecycle: [onStartShouldSetResponder / onMoveShouldSetResponder]
   - Single vs multi-touch: [Single touch / Multi-touch gestures]
   - Gesture constraints: [Boundaries / thresholds]

Generate:
1. Component using GestureDetector from react-native-gesture-handler
2. Appropriate gesture definitions (Tap, LongPress, Pan, etc.)
3. Animation logic using useAnimatedStyle from react-native-reanimated
4. Proper TypeScript types for gesture state
5. Haptic feedback integration if specified

Mobile Performance Optimization Prompts

Mobile devices have performance constraints that development machines do not. Cursor prompts should specify performance requirements for mobile.

Performance-Optimized List Prompt:

Generate a high-performance React Native list component optimized for mobile.

LIST PURPOSE: [WHAT THIS LIST DISPLAYS]

PERFORMANCE REQUIREMENTS:

1. RENDER OPTIMIZATION:
   - Use FlatList (not ScrollView) for large lists: [YES — mandatory]
   - keyExtractor: [EXTRACT FROM ITEM — what field to use]
   - getItemLayout: [YES — for fixed-height items / NO — for variable height]
   - removeClippedSubviews: [YES — for long lists on Android]
   - maxToRenderPerBatch: [RECOMMENDED: 10]
   - windowSize: [RECOMMENDED: 5 or 10]
   - initialNumToRender: [RECOMMENDED: 10-15]

2. IMAGE HANDLING:
   - Image component: [React Native Image / Fast Image]
   - Image caching: [Local / Remote — how handled]
   - Placeholder: [YES — while loading]
   - Error state: [YES — when image fails to load]
   - Image dimensions: [Fixed / Dynamic — how determined]

3. MEMORY MANAGEMENT:
   - List item cleanup: [onViewableItemsChanged for cleanup]
   - Unmounting behavior: [Remove from memory when off-screen]
   - Large data handling: [Pagination / Virtualization — if needed]

4. INTERACTION:
   - Pull to refresh: [YES/NO]
   - Infinite scroll / load more: [YES/NO — pagination trigger]
   - OnPress behavior: [Navigation / Action — what happens]

Generate:
1. FlatList with all recommended performance props set
2. Memoized list item component (React.memo)
3. Proper useCallback for event handlers passed to items
4. Image component with caching and error handling
5. Pagination or infinite scroll implementation if needed

Mobile Debugging Assistance Prompts

Cursor can assist with debugging React Native issues when given specific error context and mobile-specific troubleshooting frames.

Mobile Debugging Prompt:

Debug the following React Native issue with mobile-specific context.

ISSUE DESCRIPTION: [WHAT IS HAPPENING — Be specific]

MOBILE CONTEXT:
- Platform: [iOS / Android / Both]
- React Native version: [VERSION]
- Device model: [iPhone 14 Pro / Pixel 7 / etc.]
- OS version: [iOS 17.1 / Android 14 / etc.]

ERROR MESSAGES:
[PASTE ERROR MESSAGE HERE]

RELEVANT CODE:
[PASTE THE CODE THAT IS CAUSING THE ISSUE]

WHAT I HAVE TRIED:
[LIST THINGS YOU HAVE ALREADY ATTEMPTED]

TROUBLESHOOTING STEPS FOR MOBILE-SPECIFIC ISSUES:

For React Native issues, systematically check:

1. PLATFORM SPECIFICITY:
   - Does this issue occur on one platform only? [iOS/Android]
   - Are you using Platform.select() or Platform.OS correctly?
   - Are there iOS/Android-specific API differences causing this?

2. NAVIGATION STATE:
   - Is navigation state being preserved correctly?
   - Are params being passed correctly between screens?
   - Is the navigation lifecycle (focus/blur) being handled?

3. GESTURE AND TOUCH:
   - Is gesture handler properly initialized at app root?
   - Are touch handlers conflicting with navigation gestures?
   - Is there a Z-index issue with touchable elements?

4. SAFE AREA AND LAYOUT:
   - Is SafeAreaView properly wrapping the content?
   - Is KeyboardAvoidingView configured correctly?
   - Are there layout issues on notched devices vs. non-notched?

5. STATE AND RE-RENDERS:
   - Are re-renders being caused by prop changes?
   - Is state being properly initialized on mount?
   - Are there closure issues with event handlers?

Based on the error description and mobile context, identify the most likely cause and provide a specific fix.

Common React Native AI Prompt Mistakes

Mistake: Not Specifying the Platform: React Native code that works on iOS may fail on Android and vice versa. Always specify the target platform(s) and ask Cursor to include platform-specific handling where needed.

Mistake: Using Web React Patterns: React Native is not React for web. Cursor will generate web React patterns — div, onClick, CSS classes — that do not work in React Native. Always specify React Native context explicitly.

Mistake: Ignoring Safe Areas: Modern mobile devices have notches, camera cutouts, and home indicators. Components that do not account for safe areas will render incorrectly on real devices.

Mistake: Not Specifying Gesture Handling: Mobile apps use touch gestures. Without explicit gesture requirements in the prompt, Cursor will generate onClick handlers that work but feel unnatural on mobile.

Mistake: Forgetting Keyboard Handling: Forms on mobile need keyboard avoidance. Without explicit prompting, Cursor will generate forms where the keyboard covers input fields.

FAQ

What is the most important mobile-specific consideration for React Native AI prompts? Safe area handling is the most commonly overlooked mobile-specific requirement. Always specify whether components need to respect notches, camera cutouts, and home indicators.

How do I prevent Cursor from generating web React patterns? Explicitly state “React Native” in every prompt and specify mobile-specific requirements: SafeAreaView, TouchableOpacity, Platform.select(), keyboard handling. The more mobile context you provide, the more accurate the output.

What performance optimizations are most critical for React Native? FlatList optimization with proper props (keyExtractor, getItemLayout, windowSize), image caching, and memoization are the most impactful mobile performance optimizations. Always prompt for these explicitly.

Which navigation library should I specify in prompts? React Navigation v6 is the current standard. Always specify the navigator type (Stack/Tab/Drawer) and whether you are using React Navigation.

How do I handle platform-specific code in Cursor-generated React Native? Ask Cursor to use Platform.select() for platform-specific code blocks. Always test generated code on both target platforms before assuming it works on both.

Conclusion

React Native development requires mobile-specific context that generic AI prompts miss. The key to effective Cursor prompting for React Native is specificity about mobile requirements — safe areas, platform targets, gesture handling, and mobile performance constraints.

Key Takeaways:

Always specify iOS and/or Android targets in React Native prompts.
Safe area handling is non-negotiable for modern mobile devices.
React Native uses Touchable components, not onClick — specify touch interaction requirements.
FlatList with performance props is essential for lists — not ScrollView.
Mobile debugging requires platform-specific troubleshooting frames — iOS and Android have different error patterns.
Gesture handling requires react-native-gesture-handler and specific gesture definitions.

Next Step: Take a React Native component you need to build and apply the platform-aware component prompt from this guide. Notice how specifying mobile context — safe areas, gesture requirements, platform targets — produces more accurate output than generic React prompts. Test the generated component on both iOS and Android to verify platform compatibility.

Best AI Prompts for React Native Development with Cursor