To have this kind of approach working you'll at least need:
- Access to a bridge that all your
RCTRootView
s can share. If you want each root view to load a different RN component from the same bundle - they need to share the sameRCTBridge
- A
UIViewController
that its view is a RCTRootView
. You can then use this view controller as the root of a navigation controller, show it modally etc. like you've already tried to do.
Let's take a look at a very simplistic example implementation of this idea.
1. An object that holds the shared bridge
Header:
#import <Foundation/Foundation.h>
#import "RCTBridge.h"
@interface ReactBridgeManager : NSObject
@property (nonatomic, strong, readonly) RCTBridge *bridge;
-(instancetype)initWithBundleURL:(NSURL *)bundleURL launchOptions:(NSDictionary *)launchOptions;
@end
Implementation:
#import "ReactBridgeManager.h"
@interface ReactBridgeManager () <RCTBridgeDelegate>
@property (nonatomic, strong, readwrite) RCTBridge *bridge;
@property (nonatomic, strong) NSURL *bundleURL;
@end
@implementation ReactBridgeManager
- (instancetype)initWithBundleURL:(NSURL *)bundleURL launchOptions:(NSDictionary *)launchOptions
{
self = [super init];
if (self)
{
self.bundleURL = bundleURL;
self.bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
}
return self;
}
#pragma mark - RCTBridgeDelegate methods
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
return self.bundleURL;
}
@end
2. A view controller that controls a react root view
Header
#import <UIKit/UIKit.h>
#import "RCTBridge.h"
@interface ReactViewController : UIViewController
- (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString*)moduleName initialProps:(NSDictionary*)initialProps;
@end
Implementation
#import "ReactViewController.h"
#import "RCTRootView.h"
@implementation ReactViewController
- (instancetype)initWithBridge:(RCTBridge *)bridge moduleName:(NSString*)moduleName initialProps:(NSDictionary*)initialProps
{
self = [super init];
if(self)
{
self.view = [[RCTRootView alloc] initWithBridge:bridge moduleName:moduleName initialProperties:initialProps];
}
return self;
}
@end
3. Usage example
You can now create instances of ReactViewController
where necessary with your react component name (this is a component that was registered in RN AppRegistry
on the JS side) and push it into your native navigation stack, show it as a modal, etc.
//when your app is initialized, create the bridge manager and hold a reference to it.
ReactBridgeManager *bridgeManager = [[ReactBridgeManager alloc] initWithBundleURL:jsCodeLocation launchOptions:launchOptions];
//create a view controller that's controlling a react root view
ReactViewController *reactViewController = [[ReactViewController alloc] initWithBridge:bridgeManager.bridge moduleName:@"MyComponent" initialProps:nil];
Taking it to the next level
You can take a look at React Native Navigation which basically uses the same concept to allow a fully native navigation solution for react-native apps. Disclaimer: I'm part of the team that develops this package :)