ios - Add RCTRootView as a subview to rootViewController in React-Native -


how can add rctrootview on apps rootviewcontroller subview.

this want achieve. have ios native app renders opengles content on view. shows device camera feed , tracks users face , show visualisation on (much snapchat ar filters). works fine , have native ios uikit elements in there well. want overlay react-native ui elements (remove uikit component) on top of camera feed , implement ui functionality.

so want have camera feed (i.e. : open gl view) underneath react-native (rctrootview). this link. did there 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 add subview results in this

... //  rootviewcontroller.view = rootview; [rootviewcontroller.view addsubview:rootview]; ... 

enter image description here

flexible width , height result in this

... //  rootviewcontroller.view = rootview; rootview.sizeflexibility = rctrootviewsizeflexibilitywidthandheight; [rootviewcontroller.view addsubview:rootview]; ... 

enter image description here

it seems me maybe layout issue? going wrong way? welcomed.

p.s : looks ar camera feed view react-native ui atm. enter image description here

p.p.s: if don't add rctrootview subview in background (i.e. camera feed on top of react-native ui view)

i had similar issue , found following combination work liking:

// *not* set reactview.sizeflexibility  reactview.bounds = [[uiscreen mainscreen]bounds]];  reactview.layer.anchorpoint = cgpointmake( 0, 0 ); 

caveat: i'm running on top of ignite, no idea whether works flexboxes.


Comments