React Native Roadmap 2026-W20

Week of May 11–May 17, 2026

Items This Week

#TitleLabelLink
1Redraw — WebGPU 2D graphics primitives for RN & Web🟦 RNRead
2React Native SWC — SWC-powered transformer & minifier for Metro🟦 RNRead
3The Hidden Cost of <Activity>🟦 RNRead
4Expo SDK 56 Beta — Stable Expo UI, faster builds, RN 0.85🟧 EXPORead
5RN Screens 4.25 — Drops Legacy Architecture, Tabs API RC🟦 RNRead
6whisper.rn 0.6 — on-device speech transcription🟦 RNRead
7Build fast: Expo speed optimizations & fingerprint EAS workflows🟧 EXPORead
8From React web to Native in one week (Expo + Claude Code + Skills)🟧 EXPORead

5-Day Action Plan

 

🟦 Chunk 1 — Migrate Metro Bundler to React Native SWC

Goal: Replace Babel with SWC in the Metro transpilation pipeline to achieve ~3x faster full bundling and ~8x faster transform workers, reducing developer feedback loops and CI times.

Scope:

  • Install react-native-swc and its peer dependencies
  • Replace the Babel transformer in metro.config.js with the SWC transformer
  • Replace Babel minifier with the SWC minifier
  • Verify all existing transforms work correctly (Flow types, JSX, decorators)
  • Measure and document before/after bundle times in the project README

Out of scope:

  • Changing Babel configuration for non-Metro tooling (tests, web)
  • Migrating custom Babel plugins to SWC plugins (keep as a follow-up)
  • Updating CI infrastructure (timing metrics only)

Dependencies: React Native project using Metro ≥ 0.80; no prior chunks needed.

Acceptance criteria:

  • npx expo start launches without Babel errors
  • Hot reload works as expected on iOS and Android simulators
  • metro bundle measured at ≥ 2x faster than before
  • No regressions on existing screens verified by a QA smoke test

Estimated effort: M

 

**Copy/paste this prompt:**

Implement the following React Native chunk for your mobile app: Migrate the Metro bundler from Babel to React Native SWC for faster transpilation.

Goal: Replace Babel with SWC as the Metro transformer and minifier to achieve ~3x faster full bundling and ~8x faster transform workers.

Files to create or modify:

  • metro.config.js — swap transformer and minifier to SWC
  • package.json — add react-native-swc dependency
  • README.md — document before/after bundle times

Step-by-step instructions:

  1. Install: npm install react-native-swc
  2. In metro.config.js, set transformer.babelTransformerPath to require.resolve('react-native-swc/src/index.js')
  3. Set serializer.minifierPath to require.resolve('react-native-swc/src/minifier.js')
  4. Clear Metro cache: npx expo start --clear
  5. Run npx expo export and record build duration
  6. Compare with a Babel baseline (git stash → measure → git stash pop)

Acceptance criteria checklist:

  • App launches on iOS simulator without errors
  • App launches on Android emulator without errors
  • Hot reload works after a JS change
  • Bundle time is measurably faster than the Babel baseline
  • No TypeScript/Flow type-stripping errors in the output

🟦 Chunk 2 — Audit and Fix Hidden <Activity> Performance Costs

Goal: Prevent frame drops and jank when screens become visible again by auditing all <Activity>-wrapped screens for heavy useEffect usage, and replacing problematic patterns with deferred or lazy alternatives.

Scope:

  • Identify all screens or components wrapped in <Activity> (or using the React 19.2 Activity API)
  • Profile each identified screen with React Native DevTools when it transitions from hidden to visible
  • Refactor expensive useEffect hooks (data fetching, subscriptions, heavy computations) to run lazily or be cancelled while hidden
  • Replace synchronous layout effects with useEffect where possible
  • Add a short performance comment above each refactored hook explaining the rationale

Out of scope:

  • Refactoring screens not wrapped in <Activity>
  • Introducing a new state management library
  • Optimising non-Effect logic (rendering, memoisation — separate chunk)

Dependencies: React Native ≥ 0.83 (Activity API stable); no prior chunks needed.

Acceptance criteria:

  • React Native DevTools shows no dropped frames (< 2 dropped per transition) when switching to an Activity-wrapped screen
  • All previously identified expensive useEffect hooks are either deferred, cancelled, or guarded
  • A non-technical stakeholder can open and close each audited screen 5 times without visible jank

Estimated effort: M

 

**Copy/paste this prompt:**

Implement the following React Native chunk for your mobile app: Audit and fix hidden performance costs introduced by the <Activity> API.

Goal: Prevent frame drops when screens wrapped in <Activity> become visible by refactoring expensive useEffect hooks.

Files to create or modify:

  • Every screen component that is a direct child of an <Activity> wrapper
  • Each file containing a useEffect hook inside those screens

Step-by-step instructions:

  1. Search the codebase for <Activity usage: grep -r "<Activity" src/
  2. Open React Native DevTools (Profiler tab) and record a transition for each found screen
  3. For each useEffect that runs on mount AND is expensive (fetch, subscription, heavy computation): a. Add a isVisible state or use useIsFocused() from React Navigation b. Gate the effect: if (!isVisible) return; c. Return a cleanup function that cancels in-flight requests (AbortController)
  4. For layout effects (useLayoutEffect) that are not needed synchronously, downgrade to useEffect
  5. Re-profile each screen and confirm frame drop count is below 2 per transition

Acceptance criteria checklist:

  • DevTools Profiler shows < 2 dropped frames per Activity screen transition
  • All identified expensive effects are guarded by a visibility condition
  • Cleanup functions cancel in-flight work (no memory leaks in DevTools)
  • Manual smoke test: 5 open/close cycles on each screen with no visible jank

🟧 Chunk 3 — Upgrade to Expo SDK 56 Beta

Goal: Adopt Expo SDK 56 Beta to gain access to stable Expo UI (Jetpack Compose + SwiftUI APIs), React Native 0.85, faster Android startup times, and faster iOS builds via prebuilt XCFrameworks.

Scope:

  • Run npx expo install expo@next and upgrade all expo-* packages to SDK 56 Beta versions
  • Resolve any breaking changes listed in the SDK 56 Beta changelog
  • Test the app on both iOS simulator and Android emulator
  • Verify Expo UI components (if used) compile without errors
  • Confirm EAS Build completes successfully with the new SDK

Out of scope:

  • Adopting new SDK 56 features not already in use (follow-up chunks)
  • Upgrading non-Expo third-party native libraries (unless required by the SDK upgrade)
  • App Store / Play Store submission

Dependencies: Active Expo project on SDK 55; EAS account for build verification.

Acceptance criteria:

  • npx expo doctor reports no critical issues
  • The app builds and runs on iOS simulator and Android emulator
  • EAS Build succeeds for both platforms
  • Android cold-start time is equal to or faster than SDK 55 baseline

Estimated effort: M

 

**Copy/paste this prompt:**

Implement the following React Native chunk for your mobile app: Upgrade the project from Expo SDK 55 to SDK 56 Beta.

Goal: Gain stable Expo UI APIs, React Native 0.85, improved Android startup, and faster iOS builds.

Files to create or modify:

  • package.json — bump expo and all expo-* packages
  • app.json / app.config.js — update sdkVersion if hardcoded
  • eas.json — no changes needed unless a new build profile is required

Step-by-step instructions:

  1. Run npx expo install expo@next to install the latest SDK 56 Beta
  2. Run npx expo install --fix to align all expo-* packages to SDK 56-compatible versions
  3. Check the SDK 56 Beta changelog at https://expo.dev/changelog/sdk-56-beta for breaking changes
  4. Run npx expo doctor and resolve any reported issues
  5. Run npx expo run:ios and npx expo run:android locally to verify
  6. Trigger an EAS Build: eas build --platform all --profile preview
  7. Measure Android cold-start time and compare to SDK 55 baseline

Acceptance criteria checklist:

  • npx expo doctor exits with no critical errors
  • App runs on iOS simulator without crashes
  • App runs on Android emulator without crashes
  • EAS Build succeeds for both platforms
  • Android cold-start time ≤ SDK 55 baseline

🟧 Chunk 4 — Configure Fingerprint-Based EAS Update Workflows

Goal: Reduce CI build times by setting up a GitHub-connected EAS Workflow that automatically determines whether a commit requires a full native rebuild or only a JavaScript OTA update, using Expo's fingerprint hashing.

Scope:

  • Enable EAS Update in the project (eas update:configure)
  • Create an EAS Workflow file at .eas/workflows/ci.yml using the fingerprint-based template
  • Connect the Expo project to GitHub via the Expo dashboard
  • Configure a preview channel for OTA-only updates
  • Test the workflow by pushing a JS-only change (should trigger OTA) and a native change (should trigger a full build)

Out of scope:

  • Setting up production OTA updates or staged rollouts
  • Configuring multiple app variants or environments
  • EAS Submit / App Store automation

Dependencies: Expo SDK 55+ project; EAS account; GitHub repository connected to Expo; Chunk 3 (SDK 56 Beta) recommended but not required.

Acceptance criteria:

  • A commit that changes only JS files triggers an EAS Update (no full build)
  • A commit that changes package.json native dependencies or app.config.js triggers a full EAS Build
  • The GitHub commit status shows the correct workflow result (build or update)
  • A non-technical stakeholder can install the OTA update on their preview device without reinstalling the app

Estimated effort: S

 

**Copy/paste this prompt:**

Implement the following React Native chunk for your mobile app: Configure fingerprint-based EAS Update workflows to skip full builds when only JS changes.

Goal: Automatically run OTA updates for JS-only commits and full builds for native changes, cutting average CI time significantly.

Files to create or modify:

  • .eas/workflows/ci.yml — new workflow file
  • eas.json — add preview channel / update configuration
  • app.config.js (or app.json) — enable EAS Update

Step-by-step instructions:

  1. Run eas update:configure and follow the prompts to enable EAS Update
  2. In app.config.js, set updates.url to the EAS Update endpoint and updates.enabled: true
  3. Create .eas/workflows/ci.yml with the fingerprint-based workflow:
    • On push to main, compute the native fingerprint
    • If fingerprint unchanged → run eas update --channel preview --auto
    • If fingerprint changed → run eas build --channel preview --platform all --non-interactive
  4. Connect the project to GitHub in the Expo dashboard (Settings → GitHub)
  5. Push a JS-only change and verify only an OTA update runs
  6. Push a change that adds a new native package and verify a full build runs

Acceptance criteria checklist:

  • JS-only commit triggers OTA update (no full build in EAS dashboard)
  • Native-change commit triggers full EAS Build
  • GitHub commit status reflects the correct workflow outcome
  • Preview device receives OTA update without app reinstall

🟦 Chunk 5 — Integrate whisper.rn 0.6 for On-Device Speech Transcription

Goal: Add offline, on-device speech-to-text capability to the app using whisper.rn 0.6 (React Native bindings for whisper.cpp), enabling features like voice search, voice notes, or accessibility dictation without any API cost or network dependency.

Scope:

  • Install whisper.rn@0.6 and its native dependencies
  • Download a small Whisper model (e.g. ggml-tiny.en.bin, ~75 MB) and bundle it with the app or download on first launch
  • Create a useWhisper custom hook that exposes startRecording, stopRecording, and transcript state
  • Build a minimal demo screen with a record button and a transcription text area
  • Test on a physical device (iOS or Android) to verify transcription accuracy and latency

Out of scope:

  • Integration with backend APIs or cloud transcription services
  • Speaker diarisation or multi-language support
  • Production UI polish (buttons, animations)

Dependencies: React Native ≥ 0.71; microphone permission handling (expo-av or @react-native-voice/voice); no prior chunks required.

Acceptance criteria:

  • The demo screen launches and the record button is tappable on a physical device
  • After speaking a short sentence (5–10 words), the transcript appears within 3 seconds
  • Transcription works fully offline (airplane mode enabled)
  • Microphone permission prompt is shown on first use and gracefully handled if denied

Estimated effort: M

 

**Copy/paste this prompt:**

Implement the following React Native chunk for your mobile app: Integrate whisper.rn 0.6 for on-device, offline speech transcription.

Goal: Enable voice-to-text without any network dependency using whisper.cpp bindings for React Native.

Files to create or modify:

  • package.json — add whisper.rn
  • app.json / app.config.js — add microphone permission (iOS NSMicrophoneUsageDescription, Android RECORD_AUDIO)
  • src/hooks/useWhisper.ts — new custom hook
  • src/screens/VoiceDemo.tsx — new demo screen
  • src/navigation/index.tsx — register the demo route

Step-by-step instructions:

  1. Install: npx expo install whisper.rn
  2. Add microphone permissions in app.config.js:
    • iOS: NSMicrophoneUsageDescription: "Used for voice transcription"
    • Android: permissions: ["RECORD_AUDIO"]
  3. On app first launch, download ggml-tiny.en.bin from Hugging Face to the device's document directory using expo-file-system
  4. Create useWhisper.ts:
    • Load the model once with initWhisper({ filePath })
    • Expose transcribe(audioPath) returning { segments, text }
    • Handle loading / error states
  5. Create VoiceDemo.tsx:
    • Use expo-av to record audio to a temp file
    • Call transcribe on stop and display the result
  6. Build a development build (eas build --profile development) and test on a physical device

Acceptance criteria checklist:

  • whisper.rn initialises without native build errors
  • Microphone permission prompt appears on first use
  • Recording starts and stops correctly
  • Transcript appears within 3 seconds of stopping on a physical device
  • Transcription works with airplane mode enabled (fully offline)
  • Permission denial is handled gracefully (UI shows an explanation message)