React Native Roadmap 2026-W23

Implement the following React Native chunk for your mobile app:

Goal: Integrate Expo Observe (@expo/observe) to capture production performance metrics (launch time, bundle load time, time-to-interactive, per-screen metrics) in an Expo SDK 56 app using Expo Router.

Files to create or modify:

• package.json — add @expo/observe
• app/_layout.tsx — initialize Observe at the root before rendering children
• app/(tabs)/index.tsx and one other route — call markScreenReady() on first meaningful render
• One user action handler — add a trackEvent call for a key action

Step-by-step instructions:

1. Run npx expo install @expo/observe
2. In app/_layout.tsx, import Observe from @expo/observe and call Observe.initialize({ projectId: process.env.EXPO_PUBLIC_PROJECT_ID }) at the top of the root layout component
3. Wrap the root <Stack> (or <Tabs>) with <ObserveProvider> from @expo/observe
4. In each target screen, call Observe.markScreenReady() when the first meaningful content is visible (typically after data has loaded in a useEffect)
5. In your key user action handler, call Observe.trackEvent('checkout_started', { cartSize: items.length })
6. Build a release binary (npx expo run:ios --configuration Release or via EAS Build) and run the app on a real device
7. Open https://expo.dev, navigate to your project → Observe tab, and confirm metrics appear

Acceptance criteria checklist:

• @expo/observe is listed in package.json dependencies
• Observe.initialize() is called in the root layout
• ObserveProvider wraps the navigation tree
• At least 2 screens call Observe.markScreenReady()
• Custom event appears in the Observe dashboard
• No TypeScript errors introduced by the integration

Implement the following React Native chunk for your mobile app:

Goal: Use Expo SDK 56 inline modules to write a Swift native module (DeviceInfo) directly alongside app files, then auto-generate its TypeScript interface using expo-type-information.

Files to create or modify:

• app.json — add watchedDirectories: ["app"] under the expo key
• app/DeviceInfo.swift — the inline Expo Module exposing device info
• app/screens/DeviceInfoScreen.tsx — a screen that consumes the native module
• (Generated) app/DeviceInfo.generated.ts and app/DeviceInfo.tsx

Step-by-step instructions:

1. In app.json, add "watchedDirectories": ["app"] inside the expo object
2. Create app/DeviceInfo.swift with the following content:

import ExpoModulesCore
import UIKit

public class DeviceInfoModule: Module {
  public func definition() -> ModuleDefinition {
    Name("DeviceInfo")
    Function("getModel") { () -> String in
      return UIDevice.current.model
    }
    Function("getOSVersion") { () -> String in
      return UIDevice.current.systemVersion
    }
  }
}

3. Run npx expo prebuild --clean to update the Xcode project
4. Run npx expo-type-information inline-modules-interface to generate TypeScript types
5. In app/screens/DeviceInfoScreen.tsx, import from the generated file and call getModel() / getOSVersion() in a useEffect, displaying results in <Text> components
6. Run npx expo run:ios and verify the screen shows the correct device model and OS version

Acceptance criteria checklist:

• watchedDirectories: ["app"] is in app.json
• app/DeviceInfo.swift exists and uses the Expo Module DSL
• npx expo prebuild completes with no errors
• DeviceInfo.generated.ts is generated with correct TypeScript function signatures
• The screen renders the device model and OS version from native code
• No TypeScript errors in the project

Implement the following React Native chunk for your mobile app:

Goal: Upgrade an Expo project from SDK 55 to SDK 56 to gain the automatic JSI/Swift performance improvement (1.6–2.3x faster iOS native module calls), then verify the upgrade is complete and measure the speedup.

Files to create or modify:

• package.json — bump expo and all expo-* packages to SDK 56 compatible versions
• ios/Podfile — re-run pod install to update native dependencies
• app/BenchmarkScreen.tsx — optional screen for measuring native call latency

Step-by-step instructions:

1. Run npx expo install expo@latest to upgrade the Expo SDK
2. Run npx expo install --fix to update all Expo packages to SDK 56-compatible versions
3. Run npx expo-doctor and resolve any reported critical issues
4. Delete the ios/Pods directory and run cd ios && pod install (or npx pod-install)
5. Build a release build: npx expo run:ios --configuration Release
6. (Optional) Create app/BenchmarkScreen.tsx that calls a simple native module function in a loop of 1,000 iterations and measures elapsed time with Date.now()
7. Record the benchmark result and compare with a baseline from SDK 55
8. Test all existing native features manually (camera, push notifications, biometrics, etc.)

Acceptance criteria checklist:

• package.json shows expo: ~56.0.0
• npx expo-doctor passes with no critical errors
• iOS release build succeeds on Xcode 16+
• No Objective-C++ bridge errors for Expo Modules in the build log
• Benchmark shows ≥ 1.5x speedup on native calls vs SDK 55
• All existing native features work as expected after the upgrade

Implement the following React Native chunk for your mobile app:

Goal: Upgrade react-native-gesture-handler from v2 to v3.0.0 (released at App.js Conf 2026), adapting all gesture usage to the new API and verifying all gestures work on both platforms.

Files to create or modify:

• package.json — bump react-native-gesture-handler to ^3.0.0
• app/_layout.tsx (or App.tsx) — verify GestureHandlerRootView placement
• Any screen using <PanGestureHandler>, <LongPressGestureHandler>, or <TapGestureHandler> — migrate to the Gesture API

Step-by-step instructions:

1. Run npm install react-native-gesture-handler@^3.0.0
2. Check the v3 migration guide at https://docs.swmansion.com/react-native-gesture-handler/docs/migration-guide
3. Ensure GestureHandlerRootView style={{ flex: 1 }} wraps your root navigator
4. Find all old component-based API usages:

grep -r "PanGestureHandler\|TapGestureHandler\|LongPressGestureHandler" app/ --include="*.tsx"

5. Migrate each to the hook-based Gesture API with <GestureDetector>:
   • <PanGestureHandler> → Gesture.Pan().onUpdate(...) inside <GestureDetector>
   • <LongPressGestureHandler> → Gesture.LongPress().onStart(...) inside <GestureDetector>
   • <TapGestureHandler> → Gesture.Tap().onEnd(...) inside <GestureDetector>
6. Run on iOS simulator: npx expo run:ios
7. Run on Android emulator: npx expo run:android
8. Manually test every gesture interaction

Acceptance criteria checklist:

• react-native-gesture-handler is ^3.0.0 in package.json
• No old component-based gesture handler imports remain
• GestureHandlerRootView still wraps the root navigator
• All gestures work correctly on iOS
• All gestures work correctly on Android
• No TypeScript errors from the Gesture Handler types
• No deprecation warnings in Metro bundler output

Implement the following React Native chunk for your mobile app:

Goal: Enable the React Compiler (Rust build, nearly merged to React main in June 2026) in your Expo React Native project to automatically memoize components and hooks, then remove manual useMemo/useCallback that become redundant.

Files to create or modify:

• package.json — add babel-plugin-react-compiler to devDependencies
• babel.config.js — enable the compiler plugin
• Multiple .tsx component files — remove now-redundant useMemo / useCallback calls

Step-by-step instructions:

1. Install the plugin:

npx expo install babel-plugin-react-compiler@latest

2. In babel.config.js, add the plugin:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'infer',
    }]
  ],
};

3. Clear Metro cache and start the bundler:

npx expo start --clear

4. Fix any compiler errors (they reveal genuine Rules of React violations). Common issues:
   • Mutating state or props directly
   • Reading ref.current during render
   • Calling hooks conditionally
5. Open React DevTools Profiler, record an interaction on 3 key screens, and note re-render counts as your baseline
6. Search for and remove useMemo / useCallback calls no longer needed:

grep -rn "useMemo\|useCallback" app/ --include="*.tsx"

7. Re-profile the same 3 screens and compare render counts against the baseline
8. Run the full app on both iOS and Android to verify no new runtime errors

Acceptance criteria checklist:

• babel-plugin-react-compiler is in devDependencies (latest version)
• babel.config.js has the compiler plugin with compilationMode: 'infer'
• Metro bundler starts without errors after --clear
• No new runtime errors on iOS or Android
• React DevTools Profiler shows reduced re-renders on 3+ screens
• At least 5 useMemo/useCallback calls removed from the codebase
• All existing features work correctly after the changes