Issues Integrating Multiple React Native SDKs into Native iOS and Android Apps #443
Unanswered
camilo5972
asked this question in
Q&A
Replies: 7 comments 1 reply
-
|
So if I'm getting it correctly, this is about initializing two separate React Native instances at the same right? This in theory might be possible but personally I'm not sure if anyone has tried to implement this before. Historically we've always initialized a single instance and loaded multiple views using it. What's your exact use case here? Do you need proper runtime encapsulation between the instances? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
cc @CAMOBAP |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@camilo5972 to be on the same page by "Integrating Multiple React Native SDKs" you mean that you may have two or more react-native libraries with different versions i.e. 0.78.0 and 0.80.0? |
Beta Was this translation helpful? Give feedback.
0 replies
-
@camilo5972 - I could expect a few build issues here. There could be duplicate classes and duplicate JNI libs errors that you can face. While integrating multiple AARs based on RN brownfield projects is not usual but still a valid use case. My questions based on the comments above as well are:
This is really a complicated topic, however from what I expect, if there were fixes to be done, they might need to happen at the native App level. This is my intuition. However, we do not exactly know the issues and neither the use case. I will suggest @camilo5972 if you can provide answers and maybe errors you faced, so this can be investigated and discussed further. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Hi @CAMOBAP, @atlj. In our case, we’re indeed following the scenario you described: "Different teams working on different features, each distributed as separate AARs, and all of these features need to be integrated into a single native app." Each team is responsible for a different React Native flow, and while these flows are not used simultaneously, they are all bundled into separate AARs. Importantly, all teams are aligned to use the same React Native version (0.80.0) to avoid runtime conflicts. If you have any recommendations or best practices for managing this kind of multi-AAR RN integration — especially around avoiding duplication or isolating shared native code — we’d love to hear them. This is my error when I try to build the native app: |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@camilo5972 - Thanks for the logs and your reasoning on why you use this approach. To understand it in more detail, I have a few more questions:
I am asking these question so as to understand it in more details and we can discuss a potentially viable solution. Regardless of it, I have a solution for you to try. Since the error you're facing is related tot he duplicate classes as they are used and embedded in both the AARs. To fix this, we can exclude the modules from one AAR, which are duplicated in both AARs. Consider the following: implementation("com.libraryA:0.1.0")
implementation("com.libraryB:0.1.1") {
exclude(module = "react-native-brownfield")
exclude(module = "react-native-screens")
...
}With this, we are only removing the modules from one AAR, which are similar in both AARs to avoid the duplicate classes issue. However, doing so means if both AARs are using different versions of, say implementation("com.libraryA:0.1.0") {
exclude(module = "react-native-screens")
}
implementation("com.libraryB:0.1.1") {
exclude(module = "react-native-brownfield")
...
}For duplicate JNI libs, you can opt for the following solution, where gradle picks the first occurrence and skips the next duplicate one. android {
packagingOptions {
pickFirst 'lib/arm64-v8a/libappmodules.so'
pickFirst 'lib/x86_64/libappmodules.so'
// Add for all ABIs you care about
}
}However, this should also be used with caution if you have different library versions in your AAR. For example this JNI lib is fine as you confirmed you have parity in react-native versions. But maybe if you have JNI lib for RN screens and both projects using different versions of it, then you need to make sure to have parity between the versions. Now, I would like to discuss another approach which to ensure scalability. As with the above solutions, if you have third AAR, you will have to handle that as well. I was thinking to have a base AAR responsible for providing all of the modules and JNI libs. The AARs for features should only embed JS bundle, JS and native assets. The native app will then need to consume the following like so: implementation("com.libraryBase:0.1.0") // provides modules, JNI libs and class to present views and initialize react
implementation("com.libraryA:0.1.0") // provides its assets and JS bundle
implementation("com.libraryA:0.1.0") // provides its assets and JS bundleThis way there will be no more duplicate classes or JNI libs as libraryBase would be providing it. However, even with this and the above solutions there is one issue. When we initialize the react instance, it takes default Consider this that the native App needs to present ViewA from libraryA and you call initialize with Theoretically, this all is doable, however the Apart from it, I think you can try loading different JS bundles by combining it with the solutions described for duplicate classes and JNI libs. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
hi @hurali97,
I’ve tried using exclude, but it’s not working — I’m still getting a duplicate classes error. I’m going to try a different approach by loading the JS bundles directly and installing the React dependencies in the native shell. I’m not sure if you have a guide somewhere on how to do this manually, without using the brownfield setup |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
We do not have a guide somewhere but if you wanna try that, I can suggest a few pointers:
reactBrownfield {
resolveLocalDependencies = false
}
afterEvaluate {
tasks.named("copyReleaseLibSources").configure {
enabled = false
}
tasks.named("copyDebugLibSources").configure {
enabled = false
}
}
@JvmStatic
fun initialize(application: Application, options: HashMap<String, Any>) {
val reactNativeHost: ReactNativeHost =
object : DefaultReactNativeHost(application) {
override fun getJSMainModuleName(): String {
return options["mainModuleName"] as? String ?: super.getJSMainModuleName()
}
override fun getPackages(): List<ReactPackage> {
return (options["packages"] as? List<*> ?: emptyList<ReactPackage>())
.filterIsInstance<ReactPackage>()
}
// Add this line to load JS Bundle, you can also configure this in function argument and get it from the consumer App
override fun getBundleAssetName(): String = "index.android.bundle"
override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
}
initialize(application, reactNativeHost)
}If you're using RNEF or the guide in RNEF then you only need to set the correct JS Bundle name here: I think the above might work for your use-case. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hi everyone,
I'm currently working on integrating React Native into an existing native iOS and Android application. So far, integrating a single SDK works fine — everything builds and runs as expected. However, when I try to integrate two or more React Native SDKs (each with their own native modules), I start encountering build issues and runtime errors.
I'm wondering if there's any official documentation or best practices for managing multiple React Native SDKs within a native app. I'm happy to share the code I use to integrate the SDKs on the native side (both iOS and Android) if that helps with debugging or providing guidance.
Maybe @hurali97 or @thymikee have more information on this topic.
Thanks in advance for any help.
ANDROID
build.gradle.kts (app)
IOS
Beta Was this translation helpful? Give feedback.
All reactions