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