react-native-skills_skill

Overview

This skill provides concise, actionable best practices for building performant React Native and Expo mobile apps. It focuses on list performance, animations, navigation, UI patterns, state, rendering, monorepo layout, and configuration. Use it to enforce high-impact rules and common patterns that reduce jank, memory use, and native integration issues.

How this skill works

The skill inspects tasks or code involving React Native, Expo, mobile performance, and native APIs, then recommends specific rules and fixes from prioritized categories. It highlights critical list optimizations, recommended animation patterns, native navigation choices, and UI/component-level guidance. Each rule points to concrete code patterns to avoid and preferred implementations for better runtime behavior.

When to use it

• When building or reviewing React Native or Expo apps
• When optimizing scrolling, lists, and large data sets
• When implementing animations with Reanimated or gestures
• When integrating native modules, fonts, or media handling
• When structuring monorepos that include native dependencies

Best practices

• For large lists, virtualize with FlashList and memoize item components; stabilize callbacks and avoid inline style objects
• Animate only GPU-friendly properties (transform, opacity) and compute animations with derived values to keep work off the JS thread
• Prefer native stack/tabs for navigation performance and use native modal/menu primitives where possible
• Use expo-image for efficient image handling and optimize images inside lists to reduce memory and layout cost
• Minimize state subscriptions, use dispatcher patterns for callbacks, and show fallbacks on first render to avoid layout thrash

Example use cases

• Convert a FlatList with jank into a FlashList with memoized items and stable callbacks
• Replace JS-heavy animated gestures with Reanimated derived values and GPU-only transforms
• Switch a JS navigator to native stack/tabs to fix slow transitions on low-end devices
• Organize a monorepo so native dependencies live in the app package and ensure single-version dependencies
• Add expo-image and lazy image loading to an image gallery to reduce memory spikes