Building React Native In-App Modules bypassing the JS bridge.

Turbo Modules in React Native enhance JavaScript interactions with native code, offering faster, more efficient communication than the traditional bridge model. By leveraging Turbo Modules, developers can seamlessly integrate performance-critical native features directly into their apps, ensuring high speed without relying on external libraries. This guide will show you how to build a native in-app module with Turbo Modules, optimizing your React Native app for a smoother, faster user experience.

In this guide, we will create a basic in-app native module that enables app restarts, utilizing Java for Android and Objective-C++ for iOS.

Step 1: Create spec file

Start by creating folder name specs at the root level. Inside the specs folder create a fileNamed NativeRestartPackage.ts .
_{Note that the TurboModules requires the prefix Native to work.}

Add the following code

import { TurboModule, TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
    restartApp(): void;
}

export default TurboModuleRegistry.get<Spec>("NativeRestartApp") as Spec | null;

Step 2: Codgen Configuration

Add the below configuration to your package.json

 "codegenConfig": {
    "name": "NativeRestartPackageSpec",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "com.restartApp"
    }
  }

Step 3: Native Android Code

Create a folder named restartApp at android/app/src/main/java/com.

Create NativeRestartApp.java and add the code with all your native logic.

package com.restartApp;

import android.content.Context;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.jakewharton.processphoenix.ProcessPhoenix;
import com.restartApp.NativeRestartPackageSpec;
import android.util.Log;



public class NativeRestartApp extends NativeRestartPackageSpec{
    private final Context mContext;
    public static final String NAME = "NativeRestartApp";

    public NativeRestartApp(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mContext= reactContext.getApplicationContext();
    }

    @Override
    public String getName() {
        return NAME;
    }
    public void restartApp(){
        Log.d("NativeRestartApp", "Restarting app");
        ProcessPhoenix.triggerRebirth(mContext);
    }

}

Create NativeRestartPackage.java and add the following code.

package com.restartApp;

import com.facebook.react.TurboReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;


import java.util.HashMap;
import java.util.Map;

public class NativeRestartPackage extends TurboReactPackage {
    @Override
    public NativeModule getModule(String name, ReactApplicationContext reactContext){
        if (name.equals(NativeRestartApp.NAME)) {
            return new NativeRestartApp(reactContext);
        } else {
            return null;
        }
    }
    @Override
    public ReactModuleInfoProvider getReactModuleInfoProvider() {
        return new ReactModuleInfoProvider() {
            @Override
                public Map<String, ReactModuleInfo> getReactModuleInfos() {
                    Map<String, ReactModuleInfo> moduleInfoMap = new HashMap<>();
                    moduleInfoMap.put(
                        NativeRestartApp.NAME,
                        new ReactModuleInfo(
                            NativeRestartApp.NAME,
                            NativeRestartApp.NAME,
                            false, // canOverrideExistingModule
                            false, // needsEagerInit
                            false, // isCxxModule
                            true   // isTurboModule
                        )
                    );
                    return moduleInfoMap;
                }
        };

    }

}

Now its time to add the code into MainApplication(Since this is an in-app-module and wont be autolinked).

import com.restartApp.NativeRestartPackage

//Rest of code
override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              add(NativeRestartPackage())
            }

//Rest of code

Step 4: Native iOS Code

Create a new group(using Xcode) in your app named NativeRestartApp.

Create RCTRestartApp.h

#import <Foundation/Foundation.h>
#import <NativeRestartPackageSpec/NativeRestartPackageSpec.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTRootView.h>
#import <React/RCTReloadCommand.h>

NS_ASSUME_NONNULL_BEGIN

@interface RCTRestartApp : NSObject<NativeRestartPackageSpec>

@end

NS_ASSUME_NONNULL_END

Create RCTRestartApp.mm and add all your native logic here

#import "RCTRestartApp.h"

@implementation RCTRestartApp

RCT_EXPORT_MODULE(NativeRestartApp)
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeRestartPackageSpecJSI>(params);
}
- (void)restartApp{
  void (^loadBundle)(void) = ^{
     RCTTriggerReloadCommandListeners(@"restart");
   };

   if ([NSThread isMainThread]) {
     loadBundle();
   } else {
     dispatch_sync(dispatch_get_main_queue(), loadBundle);
   }

}
@end

Step 5: Finally the Javascript code

import React from 'react';
import type { PropsWithChildren } from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'
import NativeRestartPackage from './specs/NativeRestartPackage'

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({ children, title }: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <View style={styles.sectionContainer}>

    </View>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Button title="Click me" onPress={() => {
            NativeRestartPackage.restartApp()
          }} />
          {/* <LearnMoreLinks /> */}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Finally Run the app . You should be able to access native functionality bridgeless

Eg Video:-
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbbdyisp25wkq3kbpxow.gif

Conclusion

There is no conclusion , it just works like a charm .

Do like(at least for the cover meme XD)

Blog