react-native-guidelines

React Native Guidelines

Part of Agent Skills™ by googleadsagent.ai™

Description

React Native Guidelines codifies 16 rules across 7 sections—Performance, Layout, Animation, Images, State, Architecture, and Platform—that prevent the most common pitfalls in cross-platform mobile development. Each rule addresses a specific failure mode unique to React Native's bridge architecture and native rendering pipeline.

React Native's performance characteristics differ fundamentally from web React. The JavaScript thread, the UI thread, and the native modules thread communicate asynchronously, and bottlenecks in any thread degrade the user experience. These guidelines focus on keeping the JS thread unblocked, using the native driver for animations, optimizing FlatList rendering, and minimizing bridge crossings.

The rules are calibrated for production applications running on both iOS and Android. Platform-specific behaviors, gesture handling differences, and navigation patterns are addressed explicitly rather than treated as edge cases.

Use When

• Building new React Native screens or components
• Debugging performance issues on iOS or Android
• Reviewing React Native code for cross-platform correctness
• Implementing animations or gesture interactions
• Optimizing list rendering for large datasets
• Handling platform-specific behavior differences

How It Works

graph TD
    A[React Native Code] --> B{Section Analysis}
    B --> C[Performance: JS Thread Budget]
    B --> D[Layout: Flexbox + Safe Areas]
    B --> E[Animation: Native Driver]
    B --> F[Images: Caching + Sizing]
    B --> G[State: Minimal Re-renders]
    B --> H[Architecture: Navigation + Deep Links]
    B --> I[Platform: iOS/Android Specifics]
    C --> J[Optimized Output]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

Each section contains 2-3 focused rules targeting the highest-impact issues in that category. Rules are applied during code generation and flagged during review.