integrate react native app using react-native-navigation with existing iOS app

Question

I have a React Native project which uses react-native-navigation.I have integrated this project with an existing native iOS application in swift.As the documentation of wix says, this line of code will show the react native app through the native iOS app:

let jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)
RCCManager.sharedIntance().initBridge(withBundleURL: jsCodeLocation)

The problem is that by calling this line of code the app opens up the launch screen, whereas I need to open the react native app by pressing a button in native app and push it as a viewController but calling this line of code opens the launch screen again without having any back button to go back to native iOS app. In addition, if I remove this line of code and instead use this below code, then I will get crash. I also tried using this code as the react-native integration documentation mentioned but it doesn't work with react-native-navigation:

let jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)

let bridge = RCTBridge(bundleURL: jsCodeLocation, moduleProvider: nil, launchOptions: nil)
let rootView = RCTRootView(bridge: bridge, moduleName: "MyHotels", initialProperties: nil)


let rnViewController = UIViewController()
rnViewController.view = rootView

self.navigationController?.pushViewController(rnViewController, animated: true)

The above code opens the react native to the way I wish for but it will crash with the error below:

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'A bridge instance is required to create an RCTRootView'

my react-native-navigation version is: "^1.1.457"

Artal Artal · Accepted Answer · 2018-06-27T08:01:12

At the moment, RNN is designed for apps that are "react native first", or what you would call a greenfield RN app; the bootstrapping API (both in v1 and v2) shows the splash screen, but even if you could work around it - this would not work. There are plans to expose the RNN API on the native side so apps like yours would be able to utilized all of its capabilities. I can't tell when this will be available, but it's in the roadmap of v2.

That said, if you already have a native app and want to integrate a react native view, you don't really need RNN. Yes, there are some pretty cool and convenient features which RNN provides but you have total control of your native screens (view controllers) so you can customize them as necessary yourself.

See this guide for more info about how to integrate react native with existing apps. I'm not sure why you're getting this error because it's basically the way you're supposed to implement it, maybe it fails to create the bridge object for some reason. You can simplify it and create a RCTRootView without a bridge via initWithBundleURL (in this case, RN creates the bridge internally), but if you plan to have several RN screen and/or views that also communicate between one another - you will need to have a single bridge instance that all root-views share; this is actually what RNN does as well.

integrate react native app using react-native-navigation with existing iOS app

1 Answers