React Native New Architecture and OTA Updates

Introduction

React Native's New Architecture represents the biggest change to the framework since its inception. With Fabric, TurboModules, and Bridgeless Mode, the rendering pipeline and native module system have been completely rewritten.

The key question for teams shipping OTA updates: does it still work?

Yes. And in this guide, we'll explain exactly how.

What Changed in the New Architecture

Fabric (New Renderer)

• Renders views synchronously on the main thread
• Supports concurrent features
• Improves view flattening
• Enables better animations

Impact on OTA: None. Fabric changes how native views are rendered, but OTA updates only modify the JavaScript layer. Your React components define what to render—Fabric handles how.

TurboModules (New Native Module System)

• Lazy loading (modules loaded on first use)
• Direct JavaScript → C++ communication
• Type-safe interfaces via CodeGen

Impact on OTA: Minimal. TurboModules define the interface between JavaScript and native code. OTA updates can change how you call TurboModules, but not the native module implementation itself.

// This JavaScript code CAN be updated via OTA
import { CameraModule } from './NativeCameraModule';

function takePicture() {
  // Calling the TurboModule is JavaScript
  // The native implementation stays the same
  const photo = await CameraModule.capture({ quality: 0.8 });
  return photo;
}

Bridgeless Mode

• Eliminates JSON serialization overhead
• Direct communication via JSI (JavaScript Interface)
• Faster startup times

Impact on OTA: None. The bridge vs. bridgeless distinction is a native runtime concern. JavaScript code runs the same way regardless.

What OTA Can Update in New Architecture Apps

Always updatable (JavaScript layer):

Not updatable (requires app store release):

Compatibility with SwiftPatch

SwiftPatch fully supports React Native's New Architecture. Here's what happens under the hood:

New Architecture App Launch:
1. Native shell initializes (Fabric, TurboModules, JSI)
2. Hermes engine starts
3. SwiftPatch checks for updates
4. If update available:
   - Downloads differential patch
   - Applies to JavaScript bundle
   - Hermes loads updated bundle
5. React components render via Fabric
6. TurboModules called via JSI

The key insight: OTA updates operate at the JavaScript bundle level, which is independent of whether you're using the old or new architecture.

Setup for New Architecture Projects

Step 1: Verify New Architecture is Enabled

# iOS: Check Podfile
# newArchEnabled=true should be set

# Android: Check gradle.properties
# newArchEnabled=true

Step 2: Install SwiftPatch

npm install swiftpatch
cd ios && pod install

Step 3: Initialize

import { SwiftPatch } from 'swiftpatch';

// Works identically with New Architecture
SwiftPatch.init({
  deploymentKey: 'YOUR_KEY',
  autoRollback: true,
});

Step 4: Deploy

swiftpatch release --platform all

No additional configuration needed for New Architecture.

Common Scenarios

Updating a Component That Uses Fabric

// Before update
function ProfileCard({ user }) {
  return (
    <View style={styles.card}>
      <Text>{user.name}</Text>
    </View>
  );
}

// After OTA update - new layout, same Fabric rendering
function ProfileCard({ user }) {
  return (
    <View style={styles.card}>
      <Image source={{ uri: user.avatar }} style={styles.avatar} />
      <Text style={styles.name}>{user.name}</Text>
      <Text style={styles.bio}>{user.bio}</Text>
    </View>
  );
}

This update works perfectly because Fabric renders whatever React tree your JavaScript produces.

Updating TurboModule Call Patterns

// Before update
const data = await DatabaseModule.query('SELECT * FROM users');

// After OTA update - different query, same TurboModule
const data = await DatabaseModule.query(
  'SELECT * FROM users WHERE active = true ORDER BY last_login DESC'
);

The native DatabaseModule implementation stays the same; only the JavaScript calling code changes.

Adding New TurboModules (Requires App Store)

// This CANNOT be done via OTA
// Requires a new native build + app store release
import { NewPaymentModule } from './NativeNewPaymentModule';

If the TurboModule doesn't exist in the native binary, you can't call it via OTA-updated JavaScript.

Migration Guide

From Old Architecture + CodePush

If you're migrating from the old architecture with CodePush to the new architecture with SwiftPatch:

# 1. Enable New Architecture
# iOS: Set newArchEnabled=true in Podfile
# Android: Set newArchEnabled=true in gradle.properties

# 2. Remove CodePush
npm uninstall react-native-code-push

# 3. Install SwiftPatch
npm install swiftpatch

# 4. Run migration
npx swiftpatch migrate

# 5. Rebuild native app
cd ios && pod install
npx react-native run-ios

From Old Architecture + SwiftPatch

Already using SwiftPatch? Enabling New Architecture requires no SwiftPatch changes:

# 1. Enable New Architecture
# 2. Rebuild native app
# 3. That's it — SwiftPatch continues working

Performance Considerations

Hermes Bytecode

With New Architecture, most apps use Hermes engine with bytecode compilation. SwiftPatch handles this automatically:

Source code → Hermes bytecode → Bundle
                                  ↓
                            OTA differential
                                  ↓
                          Updated bytecode bundle

SwiftPatch diffs at the bytecode level, ensuring minimal patch sizes even with compiled bundles.

Startup Time

• Check request: ~50ms
• No update: continues immediately
• Update available: downloads in background
• Average patch size: 200KB
• Total impact: < 100ms on modern devices

FAQ

Q: Do I need different SwiftPatch configs for old vs. new architecture?

A: No. SwiftPatch works the same way regardless of architecture.

Q: Can I OTA-update Codegen specs?

A: No. Codegen specs generate native code, which requires a full rebuild.

Q: Does Bridgeless Mode affect OTA?

A: No. OTA updates operate at the JavaScript bundle level, independent of the bridge.

Q: What about concurrent features (Suspense, transitions)?

A: Fully supported. These are JavaScript/React features that work with OTA updates.

Conclusion

React Native's New Architecture is a major step forward for performance and developer experience. The good news: OTA updates work exactly the same way. The JavaScript bundle—where your app logic lives—is still separately loadable, updatable, and patchable.

SwiftPatch supports the New Architecture out of the box. No special configuration, no compatibility mode—just install and deploy.

Try SwiftPatch with New Architecture →