CODEWITHSUNDEEP
iosreact-nativeuikitreact-native-camera
hdsenevi
hdsenevi

Reputation: 1001

Add RCTRootView as a subview to rootViewController in React-Native

How can I add a RCTRootView on to apps RootViewController as a subview.

This is what I want to achieve. I have an iOS native app that renders some OpenGLES content on to a view. It shows device camera feed and tracks users face and show some visualisation on it (much like snapchat AR filters). This all works fine and I have native iOS UIKit elements in there as well. I want to overlay some react-native UI elements (remove UIKit component) on top of this camera feed and implement the UI functionality.

So I want to have the camera feed (i.e. : open gl view) underneath the react-native (RCTRootView). Mostly like this link. I almost did it but there are some annoying layout issues.

Default AppDelegate.m implementation

NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings]
jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

RCTRootView *rootView = [[RCTRootView alloc] 
initWithBundleURL:jsCodeLocation moduleName:@"AwesomeProject" initialProperties:nil launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];

enter image description here

Trying to add it as a subview results in this

...
//  rootViewController.view = rootView;
[rootViewController.view addSubview:rootView];
...

enter image description here

Flexible width and height result in this

...
//  rootViewController.view = rootView;
rootView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
[rootViewController.view addSubview:rootView];
...

enter image description here

It seems to me like this is maybe a layout issue? But am I going about this the wrong way? any help is welcomed.

p.s : this is what it looks like with an AR camera feed view with react-native UI atm. enter image description here

p.p.s: if I don't add RCTRootView as a subview then it will always be in the background (i.e. camera feed will always be on top of the react-native UI view)

Upvotes: 1

Views: 2399

Answers (1)

Salieri
Salieri

Reputation: 792

I had a similar issue and found the following combination to work to my liking:

// Do *NOT* set reactView.sizeFlexibility

reactView.bounds = [[UIScreen mainScreen]bounds]];

reactView.layer.anchorPoint = CGPointMake( 0, 0 );

Caveat: I'm running on top of Ignite, so no idea whether this works with flexboxes.

Upvotes: 1

Related Questions