skip to Main Content

I have two standalone React Native projects, and I am planning to integrate them into my Android project. However, the documentation only covers integrating one React Native project into an existing Android project. Has anyone attempted this approach before?

I have integrated only one React project and it works fine. I’m just wondering if it’s possible to integrate two React projects.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search