Enabling React Native New Architecture (TurboModules and Fabric) Step‑by‑Step

Desired outcome

You will have a React Native project that uses the New Architecture: TurboModules for lazy‑loaded native modules and Fabric for synchronous UI rendering. The legacy asynchronous Bridge is bypassed, and JSI‑based calls are active.

Prerequisites

• React Native version 0.68 or newer (0.71+ recommended for better stability).
• Android Studio with Gradle 7.x or later installed.
• CocoaPods 1.11+ and Xcode 14+ for iOS builds.
• A working React Native project that you can rebuild from scratch.
• Basic familiarity with editing gradle.properties, Podfile, and running Gradle or pod commands.

Procedure

1. Enable the New Architecture flag
   1. Open android/gradle.properties in your project.
   2. Add or set the property:

      newArchEnabled=true

   3. Save the file. This tells the Gradle plugin to build TurboModules and Fabric for Android.
2. Configure iOS pods
   1. Open ios/Podfile.
   2. Inside the install! 'cocoapods' block, set the flag:

      install! 'cocoapods', :disable_input_output_paths => true
      

   3. Then, ensure the RCT_NEW_ARCH_ENABLED flag is passed:

        pod 'React', :path => '../node_modules/react-native'
        pod 'React-Core', :path => '../node_modules/react-native'
        pod 'React-Codegen', :path => '../node_modules/react-native'
        pod 'React-RCTFabric', :path => '../node_modules/react-native'
        pod 'React-RCTTurboModule', :path => '../node_modules/react-native'
        pod 'React-JSI', :path => '../node_modules/react-native'
        pod 'ReactCommon/turbomodule/core', :path => '../node_modules/react-native'
        pod 'ReactCommon/fabric', :path => '../node_modules/react-native'
      

   4. At the top of the file, add:

        $RNFirebaseAsStaticFramework = true
      

      (only if you use Firebase; otherwise skip).
   5. Run:
   1. cd ios && pod install --repo-update
3. Generate C++ interfaces with Codegen
   1. Ensure you have TypeScript (or Flow) definitions for the native modules you want to expose. For example, a simple module NativeGreeting.ts:

   // NativeGreeting.ts
   import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
   import { TurboModuleRegistry } from 'react-native';
   
   export interface Spec extends TurboModule {
     + greet(name: string): string;
   }
   
   export default TurboModuleRegistry.getEnforcing('NativeGreeting');
   

   2. Run the Codegen script from the React Native CLI:

      npx react-native-codegen
        --jsPath ./src
        --outDir ./ios/Generated
        --schemaDir ./schema
        --language typescript
      

   3. Verify that ios/Generated now contains NativeGreeting-specs.h and NativeGreeting-module.cpp files.
4. Implement the native side (Android example)
   1. Create src/main/java/com/yourapp/NativeGreetingModule.java that extends ReactContextBaseJavaModule and implements the generated spec interface:

   package com.yourapp;
   
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import com.yourapp.generated.NativeGreetingModule; // generated spec
   
   public class NativeGreetingModule extends ReactContextBaseJavaModule implements NativeGreetingModule {
       public NativeGreetingModule(ReactApplicationContext ctx) {
           super(ctx);
       }
   
       @Override
       public String getName() {
           return "NativeGreeting";
       }
   
       @ReactMethod
       @Override
       public String greet(String name) {
           return "Hello, " + name + "!";
       }
   }
   

   2. Register the module in MainApplication.java inside the getPackages() method:

   new NativeGreetingPackage()
   

5. Build and run the app
   1. Android: ./gradlew assembleDebug (or run from Android Studio).
   2. iOS: npx react-native run-ios (ensure you opened the .xcworkspace).

Expected checks

• During app startup, look at the native log (Logcat for Android, Xcode console for iOS). You should see a line similar to:
1. Android: ReactNativeHost: Fabric is enabled
2. iOS: [RCTFabric] Fabric is enabled
• Verify that a call to your module is synchronous: measure the time between invoking NativeGreeting.greet('World') and receiving the result; it should be sub‑millisecond on a debug build (no bridge round‑trip).
• Inspect the build folder: android/app/build/generated/source/codegen and ios/Generated contain the C++ files produced by Codegen.

Recovery options

If the app fails to start or crashes:

1. Disable the New Architecture temporarily by setting newArchEnabled=false in gradle.properties and removing the RCT_NEW_ARCH_ENABLED flag from the Podfile, then run pod install again.
2. Clean Gradle caches: ./gradlew cleanBuildCache and ./gradlew clean.
3. For iOS, delete ios/Pods and ios/Podfile.lock and repeat pod install.
4. Check third‑party library compatibility: libraries that still depend on the old Bridge must be updated to versions that support TurboModules/Fabric or be replaced.

Limitations

• Build times increase because of the C++ compilation step; expect a 20‑40% longer incremental build on CI.
• Not all native modules in the ecosystem have been migrated; you may encounter runtime errors if a library attempts to use the old Bridge.
• Debugging native crashes requires familiarity with C++ stack traces; consider enabling firebase-crashlytics or similar for symbolication.