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, run npx create-expo-app@latest my-app (React Native's docs recommend an Expo framework; at the time of writing Expo SDK 58 / React Native 0.88). Native code outside Expo's modules does not require leaving Expo: use a development build (npx expo run:ios, npx expo run:android) and config plugins instead of editing native folders by hand. Bare projects use npx @react-native-community/cli@latest init AppName.
• Install Expo-managed libraries with npx expo install <package> so the version matches the SDK.
• 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 TanStack Query (React Query v5) for server state, Zustand or Jotai for client state, and expo-secure-store for auth tokens and secrets.
• When optimizing performance, use Reanimated for UI-thread animations (npx expo install react-native-reanimated react-native-worklets; Reanimated 4 needs react-native-worklets, and with Expo the Babel plugin is configured by babel-preset-expo), Gesture Handler for touch gestures, React.memo to prevent unnecessary re-renders, and the Hermes engine (the default). For very large lists, @shopify/flash-list is included in the Expo SDK.
• 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