Integrate two react native project in my existing android project

Its little bit complex task but we can do by the following configuration.

1. Structure Your Projects:

• Let's assume you have two React Native projects: RNProjA and RNProjB.

2. Prepare Your React Native Projects:

• For each React Native project, ensure they are correctly set up and can run independently.

• Create a bundle for each project:

  cd RNProjA

  npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

  cd ../RNProjB

  npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

3. Add React Native Projects to Your Android Project:

• Copy the android folder from RNProjA and RNProjB into your main Android project. Name them appropriately, for example, react_native_a and react_native_b.

4. Modify settings.gradle:

include ':app'
include ':react_native_a'
project(':react_native_a').projectDir = new File(rootProject.projectDir, '../react_native_a/android')

include ':react_native_b'
project(':react_native_b').projectDir = new File(rootProject.projectDir, '../react_native_b/android')

5. Modify build.gradle of Your Main Project:

• Ensure you add the dependencies of both React Native projects in your app/build.gradle:

dependencies {
    implementation project(':react_native_a')
    implementation project(':react_native_b')
    // Add other dependencies...
}

6. Initialize React Native in Your Main Application:

• Modify your MainApplication.java to initialize both React Native projects

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHostA = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                // Add additional packages for Project A
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    private final ReactNativeHost mReactNativeHostB = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                // Add additional packages for Project B
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        // Return one of the ReactNativeHosts based on your requirement
        return mReactNativeHostA;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

7. Create Activities for Each React Native Project:

• Create separate activities for each React Native project in your MainActivity.java or other activity files:

public class MainActivityA extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "RNProjA";
    }
}

public class MainActivityB extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "RNProjB";
    }
}

8. Adjust AndroidManifest.xml:

<activity android:name=".MainActivityA" />
<activity android:name=".MainActivityB" />

I hope this helps! If you have any questions or run into any issues, feel free to ask.

I worked on a similar project where I needed to run other React Native projects within a React Native application, similar to the WeChat app. After extensive research and development, I succeeded with the following method:

1. Main Application: I developed the main application using React Native CLI.

2. Modular Applications: I developed the projects to be added as modules using Expo.

3. Expo Build: I built the applications developed with Expo using the expo build:web command and uploaded them to my server.

4. Module List: In the main application, I retrieved the list of modules from the server in JSON format and listed them.

5. WebView: I used WebView to run the selected application from the list within the main application.

Additionally, I even developed a module application that lists, connects to, and sends data to Bluetooth devices using this method. In the main application, I prepared a BLE (Bluetooth Low Energy) library to facilitate communication between the two applications as follows:

function sendDataToWebView(messageType: string, messageContent: any) {
  var data = {
    messageType: messageType,
    messageContent: messageContent,
  };
  webviewRef.current.postMessage(JSON.stringify(data));
}

With this method, I was able to seamlessly exchange data between the main application and the modular applications.

I hope this gives you an idea. If you have any questions regarding this method, I would be happy to answer them.