Skip to content
Developer Toolkit

React Native Development Patterns

Master React Native development with Cursor IDE and Claude Code. These patterns cover cross-platform mobile development, native module integration, performance optimization, and deployment strategies for iOS and Android.

Quick Setup for React Native Projects

Section titled “Quick Setup for React Native Projects”

Initialize React Native with AI

Section titled “Initialize React Native with AI”
  1. Open Cursor in your workspace
  2. Activate Agent mode (Cmd/Ctrl + I)
  3. Prompt: “Create a new React Native app with TypeScript, React Navigation, React Native Paper UI, and testing setup”
  4. Let the agent handle the CLI commands and initial setup
  5. Review the generated structure and configuration

Component Development Patterns

Section titled “Component Development Patterns”

Creating Reusable Components

Section titled “Creating Reusable Components”
// Use Cursor's Agent mode for component generation
// Prompt: "Create a reusable Button component with:
// - TypeScript support
// - Multiple variants (primary, secondary, danger)
// - Loading state
// - Accessibility features
// - Platform-specific styling"


// Agent will generate:
import React from 'react';
import {
  TouchableOpacity,
  Text,
  ActivityIndicator,
  StyleSheet,
  Platform,
  TouchableOpacityProps,
} from 'react-native';


interface ButtonProps extends TouchableOpacityProps {
  variant?: 'primary' | 'secondary' | 'danger';
  loading?: boolean;
  children: React.ReactNode;
}


export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  loading = false,
  children,
  disabled,
  style,
  ...props
}) => {
  // Component implementation with platform-specific styling
};
Section titled “Navigation Patterns”

Complex Navigation Setup

Section titled “Complex Navigation Setup”
// Cursor Agent Prompt:
"Set up React Navigation with:
- Bottom tab navigator
- Stack navigators for each tab
- Deep linking support
- TypeScript types
- Authentication flow"


// The agent will create a complete navigation structure

State Management Patterns

Section titled “State Management Patterns”

Redux Toolkit Setup

Section titled “Redux Toolkit Setup”
  1. Initialize with AI: “Set up Redux Toolkit with TypeScript for React Native”
  2. Generate Slices: “Create a user slice with async thunks for API calls”
  3. Connect Components: “Add Redux hooks to UserProfile component”
  4. Add Persistence: “Implement Redux Persist with AsyncStorage”

Zustand Alternative

Section titled “Zustand Alternative”
// Cursor prompt for lightweight state management:
"Create a Zustand store for:
- User authentication state
- App settings
- Offline queue for API calls
- TypeScript interfaces"

Native Module Integration

Section titled “Native Module Integration”

Platform-Specific Code

Section titled “Platform-Specific Code”
// Cursor Agent can help with platform branching
// Prompt: "Create iOS-specific haptic feedback implementation"


import { Platform, NativeModules } from 'react-native';


const HapticFeedback = Platform.select({
  ios: () => NativeModules.HapticFeedback,
  android: () => null,
})();

Performance Optimization

Section titled “Performance Optimization”

List Optimization Patterns

Section titled “List Optimization Patterns”
// Cursor prompt for optimized lists:
"Create a performant FlatList with:
- Memo optimization
- getItemLayout implementation
- keyExtractor
- onEndReached pagination
- Empty state handling"

Image Optimization

Section titled “Image Optimization”

AI-Assisted Image Handling

Let Cursor/Claude implement:

  • Lazy loading strategies
  • Cache management
  • Progressive image loading
  • Memory optimization

Testing Patterns

Section titled “Testing Patterns”

Component Testing

Section titled “Component Testing”
// Cursor Agent prompt:
"Write comprehensive tests for Button component using:
- React Native Testing Library
- Jest
- Platform-specific test cases
- Accessibility tests"

E2E Testing with Detox

Section titled “E2E Testing with Detox”
  1. Setup: “Configure Detox for React Native project”
  2. Write Tests: “Create E2E test for login flow”
  3. CI Integration: “Add Detox tests to GitHub Actions”

Debugging Workflows

Section titled “Debugging Workflows”

Flipper Integration

Section titled “Flipper Integration”
Terminal window
# Claude Code can set up debugging tools
claude "Configure Flipper with:
1. Network plugin for API debugging
2. React DevTools integration
3. AsyncStorage viewer
4. Hermes debugger support"

Remote Debugging Tips

Section titled “Remote Debugging Tips”

Deployment Patterns

Section titled “Deployment Patterns”

CI/CD Setup

Section titled “CI/CD Setup”
# Cursor prompt: "Create GitHub Actions workflow for iOS deployment"
# Includes:
# - Certificate management
# - TestFlight upload
# - Version bumping

Common Recipes

Section titled “Common Recipes”

Authentication Flow

Section titled “Authentication Flow”
// Complete auth implementation prompt:
"Implement authentication flow with:
1. Login/Register screens
2. Biometric authentication
3. Token refresh logic
4. Secure storage
5. Deep linking for auth callbacks"

Offline-First Architecture

Section titled “Offline-First Architecture”
// Cursor Agent can implement:
"Create offline-first architecture with:
- SQLite local database
- Sync queue for API calls
- Conflict resolution
- Background sync
- Network state monitoring"

Push Notifications

Section titled “Push Notifications”
  1. Setup: “Configure push notifications for iOS and Android”
  2. Permissions: “Implement notification permission flow”
  3. Handlers: “Create notification handlers for foreground/background”
  4. Deep Links: “Add deep linking from notifications”

Best Practices with AI

Section titled “Best Practices with AI”

Effective Prompting

Section titled “Effective Prompting”
// Good prompt structure:
"Create a [component type] that:
- Requirement 1 with specific details
- Requirement 2 with constraints
- Follows our existing patterns in [file reference]
- Includes TypeScript types
- Has unit tests"

Code Review with AI

Section titled “Code Review with AI”

AI-Powered Code Review

Use Cursor/Claude to:

  • Check accessibility compliance
  • Verify platform-specific handling
  • Optimize bundle size
  • Ensure consistent styling

Advanced Patterns

Section titled “Advanced Patterns”

Native Module Creation

Section titled “Native Module Creation”
// Cursor can help create native modules
// Prompt: "Create iOS native module for:
// - Custom camera functionality
// - Objective-C bridge
// - Swift implementation
// - TypeScript definitions"

Performance Monitoring

Section titled “Performance Monitoring”
// Implement performance tracking:
"Add performance monitoring with:
- Component render times
- Navigation transitions
- API response times
- Memory usage alerts
- Crash reporting"

Next Steps

Section titled “Next Steps”