React Native & Expo Skills

Best practices for React Native and Expo mobile applications targeting iOS and Android. Contains rules covering performance, animations, navigation, styling, and platform-specific optimizations.

Tech Stack

• React Native 0.81+
• Expo SDK 54+
• Expo Router (file-based navigation)
• NativeWind (Tailwind CSS)
• React Native Reanimated
• TypeScript

When to Apply

Reference these guidelines when:

• Building React Native or Expo apps for iOS/Android
• Optimizing list and scroll performance
• Implementing animations with Reanimated
• Configuring navigation with Expo Router
• Styling components with NativeWind
• Working with images using expo-image

Rule Categories by Priority

Quick Reference

1. Core Rendering (CRITICAL)

• rendering-text-in-text-component – Wrap strings in Text components
• rendering-no-falsy-and – Avoid falsy && for conditional rendering

2. List Performance (HIGH)

• list-performance-virtualize – Use FlashList for large lists
• list-performance-item-memo – Pass primitives for memoization
• list-performance-callbacks – Hoist callbacks to list root
• list-performance-inline-objects – Avoid inline style objects
• list-performance-function-references – Keep stable object references
• list-performance-images – Use compressed images in lists
• list-performance-item-expensive – Keep list items lightweight
• list-performance-item-types – Use item types for heterogeneous lists

3. Animation (HIGH)

• animation-gpu-properties – Animate transform and opacity only
• animation-derived-value – Use useDerivedValue for computed animations
• animation-gesture-detector-press – Use Gesture.Tap for press animations

4. Scroll Performance (HIGH)

• scroll-position-no-state – Never track scroll position in useState

5. Navigation (HIGH)

• navigation-native-navigators – Use Expo Router for file-based navigation

6. React State (MEDIUM)

• react-state-minimize – Minimize state variables, derive values
• react-state-dispatcher – Use functional setState updates
• react-state-fallback – Use fallback state instead of initialState

7. State Architecture (MEDIUM)

• state-ground-truth – State must represent ground truth

8. React Compiler (MEDIUM)

• react-compiler-destructure-functions – Destructure functions early
• react-compiler-reanimated-shared-values – Use .get()/.set() for shared values

9. User Interface (MEDIUM)

• ui-expo-image – Use expo-image for all images
• ui-pressable – Use Pressable over TouchableOpacity
• ui-safe-area-scroll – Use contentInsetAdjustmentBehavior
• ui-scrollview-content-inset – Use contentInset for dynamic spacing
• ui-menus – Use native context menus
• ui-native-modals – Use native modals when possible
• ui-measure-views – Use onLayout for measuring views
• ui-styling – Use NativeWind for styling

10. JavaScript (LOW)

• js-hoist-intl – Hoist Intl object creation

11. Fonts (LOW)

• fonts-config-plugin – Use config plugins for custom fonts

How to Use

Read individual rule files for detailed explanations and code examples:

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
rules/ui-styling.md

Each rule file contains:

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md