React Native Roadmap 2026-W18

Implement the following React Native chunk for your mobile app: Configure EAS Gradle Cache for Android to speed up builds by ~50%.

Goal: Enable Gradle task caching on EAS Build so subsequent Android builds reuse cached outputs instead of recomputing them from scratch.

Files to modify:

• eas.json — add EAS_GRADLE_CACHE: "1" env var to your build profiles (production, preview, development)

Step-by-step:

1. Open eas.json and locate the build section.
2. For each Android profile (e.g., production, preview), add:

"env": {
  "EAS_GRADLE_CACHE": "1"
}

3. Commit and push the change.
4. Trigger an EAS build: eas build --platform android --profile production
5. After the first build completes, trigger a second build immediately (no code changes).
6. Open the second build logs → "Run Gradle" step → verify tasks show FROM CACHE.

Acceptance criteria checklist:

• eas.json updated with EAS_GRADLE_CACHE: "1" in all relevant profiles
• Second EAS build shows FROM CACHE in the Gradle step
• Total build time on repeat run is measurably shorter (≥30%)
• No regression in build output (APK/AAB works as expected)

Implement the following React Native chunk for your mobile app: Migrate long-running ambient animations from Reanimated to react-native-ease to achieve ~0ms UI thread cost on iOS and significantly lower cost on Android.

Goal: For declarative, non-gesture animations (skeleton loaders, drifting backgrounds, ambient pulse effects), replace Reanimated with react-native-ease which delegates to Core Animation (iOS) and ObjectAnimator (Android) with zero per-frame JS involvement.

Files to create or modify:

• package.json — add react-native-ease
• Components with ambient animations (e.g., components/SkeletonLoader.tsx, screens/HomeScreen.tsx)

Step-by-step:

1. Install: yarn add react-native-ease
2. Audit your codebase for Reanimated animations that are:
   • Declarative (not driven by gestures or scroll position)
   • Animating only visual props: opacity, transform (translate, scale, rotate)
   • Long-running or looping (skeleton loaders, background motion)
3. Replace each identified animation:

import { EaseView } from 'react-native-ease';

// Before (Reanimated)
<Animated.View style={animatedStyle} />

// After (react-native-ease)
<EaseView
  animation={{ type: 'translate', from: 0, to: 10, duration: 2000, loop: true }}
/>

4. Test on both iOS (check Xcode Instruments → Display Link) and Android release build.
5. For remaining Reanimated animations, enable feature flags in your Reanimated config:
   • ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS: true
   • IOS_SYNCHRONOUSLY_UPDATE_UI_PROPS: true

Acceptance criteria checklist:

• react-native-ease installed and used for at least one ambient animation
• No frame drops visible on a mid-range Android device in release build
• iOS Instruments shows ~0ms display link callback for migrated animations
• All animated screens pass a visual regression check
• Reanimated feature flags enabled for remaining worklet animations

Implement the following React Native chunk for your mobile app: Optimize a JSI module by replacing HostObject with NativeState for a 5x performance improvement.

Goal: Replace the HostObject::get() pattern with Object + NativeState + HostFunction to eliminate virtual dispatch, property name lookup, and string comparison overhead on every native call. Reference: https://blog.margelo.com/make-jsi-run-faster

Files to modify:

• ios/MyModule.mm (or cpp/MyModule.cpp) — C++ JSI module implementation

Step-by-step:

1. Identify the slow HostObject pattern:

// BEFORE: slow — HostObject::get() called on every property access
class MyModuleHostObject: public HostObject {
public:
  Value get(Runtime &rt, const PropNameID &name) override {
    if (name.utf8(rt) == "myMethod") {
      return Function::createFromHostFunction(...);
    }
  }
};

2. Rewrite using NativeState + direct HostFunction:

// AFTER: fast — direct pointer access, no string comparison per call
class MyNativeState: public NativeState {
public:
  int myData = 0;
};

// In your module install function:
Object jsObject(rt);
jsObject.setNativeState(rt, std::make_shared<MyNativeState>());
jsObject.setProperty(rt, "myMethod",
  Function::createFromHostFunction(rt,
    PropNameID::forAscii(rt, "myMethod"), 0,
    [](Runtime &rt, const Value &thisVal, const Value *args, size_t count) {
      auto state = thisVal.asObject(rt).getNativeState<MyNativeState>(rt);
      return Value(state->myData);
    }));
rt.global().setProperty(rt, "MyModule", std::move(jsObject));

3. Add an optional micro-benchmark:

auto t0 = std::chrono::high_resolution_clock::now();
for (int i = 0; i < 1000000; i++) { /* invoke */ }
auto t1 = std::chrono::high_resolution_clock::now();

4. Run yarn ios and verify all existing JS-side calls work correctly.
5. Run your JS test suite: yarn test

Acceptance criteria checklist:

• HostObject pattern removed; NativeState pattern implemented
• All existing JS tests pass without modification
• No crashes on iOS simulator or Android emulator
• Benchmark confirms ≥3x speedup (include numbers in PR description)
• C++ file has comments explaining the NativeState pattern for future maintainers

Implement the following React Native chunk for your mobile app: Audit all native iOS dependencies for Swift Package Manager (SPM) compatibility ahead of the CocoaPods deprecation RFC.

Goal: Create a comprehensive audit document (docs/spm-migration-audit.md) classifying each native dependency as SPM-ready, partial, or not ready, so the team can plan migration before CocoaPods is deprecated.

Context: RFC #994 (https://github.com/react-native-community/discussions-and-proposals/pull/994) proposes replacing CocoaPods with SPM on iOS. Libraries using direct C++/Swift interop (Nitro Modules: react-native-vision-camera, react-native-mmkv, react-native-unistyles, react-native-video) need special attention as SPM does not yet support mixed C++/Swift targets.

Files to create:

• docs/spm-migration-audit.md

Step-by-step:

1. Open ios/Podfile and list every pod entry.
2. Cross-reference with package.json → dependencies to identify all native modules.
3. For each dependency, visit its GitHub repo and check for Package.swift at the root.
4. Check if the library uses Nitro Modules or direct C++/Swift interop (search for HybridObject, NativeState, or bi-directional C++/Swift calls).
5. Create docs/spm-migration-audit.md:

# SPM Migration Audit

RFC reference: https://github.com/react-native-community/discussions-and-proposals/pull/994

| Dependency | Version | Has Package.swift | Nitro/C++ Interop | SPM Status | Notes |
|---|---|---|---|---|---|
| react-native-vision-camera | 4.x | ✅ | ✅ | ⚠️ Partial | C++/Swift interop needs resolution |
| react-native-mmkv | 3.x | ✅ | ✅ | ⚠️ Partial | Same C++/Swift interop issue |
| react-native-reanimated | 4.x | ❌ | ✅ | ❌ Not ready | Podspec-based build scripts |

## Next Steps
- Monitor: RFC PR #994
- Track each library's SPM issue/PR
- Re-audit when RN core ships SPM support

Acceptance criteria checklist:

• All native dependencies from ios/Podfile listed in the table
• Each has a SPM readiness status (✅ / ⚠️ / ❌)
• Nitro-based/C++ interop libraries explicitly flagged
• Document committed to docs/spm-migration-audit.md
• Shared in team channel or included in a PR for visibility

Implement the following React Native chunk for your mobile app: Enable the React Compiler (babel-plugin-react-compiler) to automatically memoize components and eliminate unnecessary re-renders.

Goal: Let the React Compiler automatically apply memoization to pure components, replacing manual useMemo/useCallback/React.memo. The compiler has been production-tested at Meta for 18 months and is safe to adopt incrementally.

Files to create or modify:

• package.json — add babel-plugin-react-compiler as a dev dependency
• babel.config.js — register the compiler plugin scoped to one directory
• Target screen file (e.g., screens/FeedScreen.tsx) — validate it compiles cleanly

Step-by-step:

1. Install: yarn add -D babel-plugin-react-compiler
2. Update babel.config.js to scope compilation to one screen:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    ['babel-plugin-react-compiler', {
      sources: (filename) => filename.includes('screens/FeedScreen'),
    }],
  ],
};

3. Clear Metro cache: npx expo start --clear
4. Open the target screen and interact with it normally.
5. Open React DevTools → Profiler → record the interaction.
6. Verify that child components that don't receive new props are no longer highlighted (grey = not re-rendered).
7. If you see use no memo in the output, review those components for side effects or missing hook dependencies.
8. Remove any now-redundant React.memo(...), useMemo, or useCallback wrappers from the compiled screen.
9. Once validated, expand sources to cover more directories incrementally.

Acceptance criteria checklist:

• babel-plugin-react-compiler installed as a dev dependency
• babel.config.js updated for at least one screen/directory
• Metro bundler starts without errors after cache clear
• React DevTools Profiler confirms fewer re-renders on the target screen
• No runtime exceptions introduced (all existing unit/E2E tests pass)
• Manual React.memo/useMemo/useCallback removed where compiler now handles it