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
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:
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.
Its little bit complex task but we can do by the following configuration.
1. Structure Your Projects:
RNProjA
andRNProjB
.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:
RNProjA
andRNProjB
into your main Android project. Name them appropriately, for example,react_native_a
andreact_native_b
.4. Modify settings.gradle:
5. Modify build.gradle of Your Main Project:
app/build.gradle
:6. Initialize React Native in Your Main Application:
MainApplication.java
to initialize both React Native projects7. Create Activities for Each React Native Project:
MainActivity.java
or other activity files:8. Adjust
AndroidManifest.xml
:I hope this helps! If you have any questions or run into any issues, feel free to ask.