React Native Skills

Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.

When to Apply

Reference these guidelines when:

• Building React Native or Expo apps
• Optimizing list and scroll performance
• Implementing animations with Reanimated
• Working with images and media
• Configuring native modules or fonts
• Structuring monorepo projects with native dependencies

Rule Categories by Priority

Quick Reference

1. List Performance (CRITICAL)

• list-performance-virtualize – Use FlashList for large lists
• list-performance-item-memo – Memoize list item components
• list-performance-callbacks – Stabilize callback references
• list-performance-inline-objects – Avoid inline style objects
• list-performance-function-references – Extract functions outside render
• list-performance-images – Optimize images in lists
• list-performance-item-expensive – Move expensive work outside items
• list-performance-item-types – Use item types for heterogeneous lists

2. Animation (HIGH)

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

3. Navigation (HIGH)

• navigation-native-navigators – Use native stack and native tabs over JS navigators

4. UI Patterns (HIGH)

• ui-expo-image – Use expo-image for all images
• ui-image-gallery – Use Galeria for image lightboxes
• ui-pressable – Use Pressable over TouchableOpacity
• ui-safe-area-scroll – Handle safe areas in ScrollViews
• ui-scrollview-content-inset – Use contentInset for headers
• ui-menus – Use native context menus
• ui-native-modals – Use native modals when possible
• ui-measure-views – Use onLayout, not measure()
• ui-styling – Use StyleSheet.create or Nativewind

5. State Management (MEDIUM)

• react-state-minimize – Minimize state subscriptions
• react-state-dispatcher – Use dispatcher pattern for callbacks
• react-state-fallback – Show fallback on first render
• react-compiler-destructure-functions – Destructure for React Compiler
• react-compiler-reanimated-shared-values – Handle shared values with compiler

6. Rendering (MEDIUM)

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

7. Monorepo (MEDIUM)

• monorepo-native-deps-in-app – Keep native dependencies in app package
• monorepo-single-dependency-versions – Use single versions across packages

8. Configuration (LOW)

• fonts-config-plugin – Use config plugins for custom fonts
• imports-design-system-folder – Organize design system imports
• js-hoist-intl – Hoist Intl object creation

How to Use

Read individual rule files for detailed explanations and code examples:

rules/list-performance-virtualize.md
rules/animation-gpu-properties.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