React Native

Overview

React Native is a framework for building native iOS and Android applications from a single TypeScript codebase. It provides core UI components (View, Text, FlatList), integrates with Expo for managed development and cloud builds, supports performant animations via Reanimated, and offers access to native device APIs through Expo SDK modules.

Instructions

• When starting a project, use Expo (npx create-expo-app) unless you need a native module Expo does not support, since ejecting adds significant complexity.
• When building lists, use FlatList for any list over 20 items with getItemLayout and keyExtractor; avoid ScrollView for large datasets since it renders all items at once.
• When implementing navigation, use Expo Router for file-based routing or React Navigation for programmatic control, with stack, tab, drawer, and modal patterns.
• When styling components, use StyleSheet.create({}) for performant styles with Flexbox layout, Platform.select() for platform-specific styles, and NativeWind for Tailwind CSS syntax.
• When managing state, use React Query or TanStack Query for server state, Zustand or Jotai for client state, and expo-secure-store for auth tokens and secrets.
• When optimizing performance, use Reanimated for 60fps UI-thread animations, Gesture Handler for touch gestures, React.memo to prevent unnecessary re-renders, and the Hermes engine (default in Expo SDK 50+).
• When testing, use Jest with React Native Testing Library for unit and component tests, and Detox or Maestro for end-to-end testing on simulators.

Examples

Example 1: Build a social feed with infinite scroll

User request: "Create a social media feed with infinite scrolling and pull-to-refresh"

Actions:

1. Set up a FlatList with onEndReached for pagination and refreshControl for pull-to-refresh
2. Use React Query with infinite query for server state management
3. Implement post cards with expo-image for optimized image loading
4. Add Reanimated-based like animation on double-tap gesture

Output: A performant social feed with infinite scroll, pull-to-refresh, optimized images, and smooth animations.

Example 2: Add biometric login to a finance app

User request: "Implement Face ID and fingerprint login for my React Native banking app"

Actions:

1. Use expo-local-authentication to check biometric availability and authenticate
2. Store auth tokens in expo-secure-store (backed by Keychain on iOS, Keystore on Android)
3. Add fallback to PIN/password when biometrics are unavailable
4. Handle authentication state with Zustand and persist session securely

Output: A banking app with biometric login, secure token storage, and graceful fallback authentication.

Guidelines

• Use Expo unless a specific native module requires ejecting; the managed workflow reduces complexity significantly.
• Use expo-image over Image for better caching, transitions, and format support.
• Use FlatList for lists over 20 items since ScrollView renders all items at once and can crash on large datasets.
• Store auth tokens in expo-secure-store, not AsyncStorage, since AsyncStorage is unencrypted.
• Use Reanimated for animations instead of the Animated API since Reanimated runs on the UI thread without JS bridge bottleneck.
• Test on real devices because simulators miss performance issues, permission flows, and push notifications.