Embedding a React Native component inside a native app removes other components

Anyone had success with embedding a React Native component inside a native app, where you have the RN component only filling part of the screen in the native app? I need my RN component to show up when tapping a particular button in a UITabBar and then take up the space available above the UITabBar.

When add a subview embedding the RN component, all other components of the view it is added to disappear from the UI?!

Image: How it should work

Image: What actually happens

In the official RN docs at https://reactnative.dev/docs/integration-with-existing-apps it's only shown how to show an entirely new page where the old native UI is no longer shown. Found this page https://www.decoide.org/react-native/docs/embedded-app-ios.html which shows the RN component taking up partial space on the screen. But no native controls are shown along side it in the sample. I tried to copy this sample and adding some other components in the xcode storyboard, but to no avail. They all disappeared when the RN component gets shown, even though it has been specified that it should stay in an area of (20,20,200,200).

Spent a lot of time searching the Internet, but not sure how many people are actually doing what I try to do here. Hope someone can help!

Here's a snippet of code used in my ViewController:

    - (void)viewDidLoad {[super viewDidLoad];      NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];      RCTRootView *rootView =      [[RCTRootView alloc] initWithBundleURL: jsCodeLocation                             moduleName: @"SimpleApp"                             launchOptions: nil];      [self.view addSubview:rootView];      rootView.frame = CGRectMake(20, 20, 200, 200);    }