Mobile Development6 min read

React Native Advanced Patterns

Advanced React Native: New Architecture (Fabric/JSI), Expo Router, gesture handling, native modules, performance profiling, and OTA updates.

react-nativemobileexpoperformance

React Native's New Architecture (stable in 2024) brings synchronous JS-native communication via JSI, concurrent rendering, and faster performance. Advanced patterns include file-based routing with Expo Router, complex gesture handling with Reanimated, and writing native modules when JS is insufficient.

Use Expo (with EAS Build) for all new React Native projects - it handles the build complexity. Enable the New Architecture - it's the future and brings real performance gains. Use Reanimated 3 for gestures and animations. Prefer Expo Router for navigation.

Workflow

Adopt the New ArchitectureNew Architecture (Fabric + JSI) eliminates the async bridge, enabling synchronous native calls and concurrent rendering.
Navigate with Expo RouterExpo Router brings file-based routing (Next.js style) to React Native - simpler than React Navigation stack setup.
Handle gestures with Reanimated 3Reanimated runs animations and gestures on the UI thread - 60-120fps without JS thread involvement.
Write native modules (Turbo Modules)Turbo Modules (New Architecture native modules) enable synchronous, typed access to native APIs not exposed by existing libraries.
Profile and optimize performanceMobile performance issues (dropped frames, high memory) directly impact user ratings.

Output Format

New Architecture enabled, Expo Router for navigation, Reanimated 3 gestures on UI thread, Turbo Module spec with codegen, FlatList with performance props, EAS Build + Update.

Examples

Animated list item: `function ListItem({ item }: { item: Product }) { const pressed = useSharedValue(false); const style = useAnimatedStyle(() => ({ transform: [{ scale: withTiming(pressed.value ? 0.95 : 1) }] })); const tap = Gesture.Tap().onBegin(() => { pressed.value = true }).onFinalize(() => { pressed.value = false }); return <GestureDetector gesture={tap}><Animated.View style={style}><Text>{item.name}</Text></Animated.View></GestureDetector> }`

Expo Router auth: `// app/_layout.tsx const { session } = useAuth(); if (!session) return <Redirect href="/login" />; return <Stack />`

OTA update: `import * as Updates from "expo-updates"; const { isUpdateAvailable } = await Updates.checkForUpdateAsync(); if (isUpdateAvailable) { await Updates.fetchUpdateAsync(); await Updates.reloadAsync() }`

Edge Cases & Gotchas

Hermes and debugging: with Hermes, use the Hermes debugger (Chrome DevTools → hermes) not the standard JS debugger. Remote JS debugging (legacy) is not supported with Hermes
Metro bundler cache: persistent Metro cache issues cause subtle bugs after package version changes. Clear: `npx expo start --clear` or `npx react-native start --reset-cache`
iOS simulator vs device: some Native APIs (camera, push notifications, NFC) don't work in the simulator. Use EAS Build to test on real devices via TestFlight

When to Break These Rules

For simple informational apps (static content, forms), React Native Web (or Expo Web) can replace native apps entirely - one codebase for web + mobile with lower complexity.

Reference Files

Expo docs: https://docs.expo.dev/
Expo Router: https://expo.github.io/router/
React Native New Architecture: https://reactnative.dev/docs/the-new-architecture/landing-page
Reanimated: https://docs.swmansion.com/react-native-reanimated/