Multiple RCTRootView in a single App

Question

I am creating a react native app but i require the use of objective C to build my custom UIView. But issue is that this UIView need to display react content. e.g. a react text input and button. I am thinking about adding a RCTRootView (which will be having these react components) to the Custom UIView and thus solve the issue. But I am currently using one RCTRootView. How do i create another one and use it in my code.

edit: I did understand that we can add different bundle with from server how-to-rename-react-native-entry-file-index-ios-js but how to use that when i am running locally.

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

Answer 1

Create another RCTRootView, as you would any other UIView.

RCTRootView *someRootView = [[RCTRootView alloc] initWithBundleURL:someJsCodeLocation 
                                                        moduleName:@"SomeRootComponent" 
                                                     launchOptions:nil];

RCTRootView *anotherRootView = [[RCTRootView alloc] initWithBundleURL:anotherJsCodeLocation 
                                                           moduleName:@"AnotherRootComponent" 
                                                        launchOptions:nil];

You can specify the same bundle (jsCodeLocation) for all RCTRootViews, or different bundles for each RCTRootView. In either case its a best practice to have different component names (moduleName):

AppRegistry.registerComponent('SomeRootComponent', () => SomeRootComponent);

AppRegistry.registerComponent('AnotherRootComponent', () => AnotherRootComponent);

If you would like to maintain multiple bundles you will need to compile each with the command:

curl 'http://localhost:8082/index1.ios.bundle?dev=false&minify=true' -o iOS/main1.jsbundle

curl 'http://localhost:8082/index2.ios.bundle?dev=false&minify=true' -o iOS/main2.jsbundle

main1.jsbundle and main2.jsbundle can then be added to your project and referenced normally.