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

Priority	Category	Impact	Prefix
1	Core Rendering	CRITICAL	rendering-
2	List Performance	HIGH	list-performance-
3	Animation	HIGH	animation-
4	Scroll	HIGH	scroll-
5	Navigation	HIGH	navigation-
6	React State	MEDIUM	react-state-
7	State Arch	MEDIUM	state-
8	React Compiler	MEDIUM	react-compiler-
9	User Interface	MEDIUM	ui-
10	JavaScript	LOW	js-
11	Fonts	LOW	fonts-

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