React Native und Expo

React Native & Expo

Build production React Native and Expo applications that follow the repository's native generation workflow, New Architecture conventions, navigation patterns and 60/120fps rendering discipline.

1. Workflow, Continuous Native Generation (CNG) and dependencies

• Detect the workflow first:
  • Expo CNG (Prebuild): ios/ and android/ are absent or generated from app.json / app.config.ts. Never hand-edit generated ios/ or android/—apply permissions, entitlements, URL schemes and build properties via app.config.ts and config plugins (expo-build-properties).
  • Bare React Native: ios/ and android/ are committed; keep Podfile, Info.plist, build.gradle and AndroidManifest.xml in sync across both platforms.
• SDK-aligned dependencies: in Expo apps, install packages with npx expo install <pkg> so versions match the pinned SDK, then run npx expo-doctor.
• Binary vs OTA boundary (runtimeVersion): any change to native dependencies, config plugins, permissions or native code requires a new native binary build and a runtimeVersion bump. Pure JS/TS/asset changes can ship via EAS Update. State which one your change needs.

2. Navigation: Expo Router & React Navigation

• Expo Router (src/app/ or app/):
  • Use layouts (_layout.tsx), route groups ((tabs), (auth)) and typed routes (experiments.typedRoutes: true).
  • Guard authenticated routes in _layout.tsx with <Stack.Protected guard={!!session} redirectTo="/sign-in"> so unauthenticated users and sign-outs never access protected screens.
  • Sanitize incoming native deep links in +native-intent.tsx (redirectSystemPath({ path, initial })), wrapping URL parsing in try/catch to redirect malformed links to a fallback route instead of crashing.
• React Navigation: define strict TypeScript param lists (RootStackParamList), pass only serializable IDs/primitives in route params, and use navigation.replace / CommonActions.reset after login or checkout.

3. Rendering, lists, gestures and the New Architecture

• Virtualized lists: never render dynamic lists with .map() inside a ScrollView. Use FlashList / LegendList or FlatList / SectionList with a stable keyExtractor={(item) => item.id}, memoized row components (React.memo), stable renderItem (useCallback), extraData when rows depend on external state, and getItemLayout for fixed heights.
• UI-thread animations and gestures: run animations and gestures on the UI thread via react-native-reanimated (useSharedValue, useAnimatedStyle, worklets) and react-native-gesture-handler (Gesture.Pan(), GestureDetector), or Animated with useNativeDriver: true. Never run setState on every scroll/gesture frame.
• Images: use expo-image with explicit dimensions, contentFit, placeholder (blurhash/thumbhash) and disk/memory caching.
• New Architecture (Fabric & TurboModules) + Hermes: avoid legacy bridge calls (findNodeHandle); use onLayout or synchronous useLayoutEffect measurements supported by Fabric.

4. Storage, environment config and platform differences

• Storage tiers:
  • Credentials & tokens -> expo-secure-store or react-native-keychain.
  • Relational data / large caches -> expo-sqlite (supports useSQLCipher config plugin and expo-sqlite/kv-store) or WatermelonDB.
  • Fast non-sensitive preferences -> react-native-mmkv or AsyncStorage.
• Environment variables: EXPO_PUBLIC_* and Constants.expoConfig.extra are public in the JS bundle—never put private API keys or server secrets there.
• Platform parity: account for iOS vs Android differences in shadows (shadow* vs elevation), keyboard avoidance (padding on iOS vs height/resize on Android), status bar contrast, and safe-area insets.

5. Testing & verification

• Test screens and hooks with Jest (jest-expo) and React Native Testing Library (render, screen.getByRole, userEvent), mocking native modules at the service boundary.
• Run npx tsc --noEmit, ESLint and npx expo-doctor.

Before you finish

• Expo CNG vs bare workflow respected; dependencies aligned with the SDK.
• Native binary rebuild vs OTA update impact (runtimeVersion) stated.
• Routes, auth guards (Stack.Protected) and deep links handled safely.
• Lists virtualized; animations on the UI thread; tsc and Jest/RNTL tests pass.