Will it be Possible to Load RCTRootView Content Synchronously in Fabric?

[grahammendick]

There’s a technical issue with React Native that affects navigation libraries using the underlying native API on iOS. I’m hoping that Fabric will solve the problem.

The problem arises when you try to write React components that change the appearance of the navigation bar. For example, I’m writing a component that adds a search bar to the navigation bar. In the native view I create a UISearchController and assign it to the navigationItem of the new UIViewController. But when I add the component to a scene, the search bar doesn’t show up.

//SearchBarView.m

- (void)didMoveToWindow
{
    [super didMoveToWindow];
    ...
    [self.reactViewController.navigationItem setSearchController:...];
}

iOS expects all changes to the navigation bar to be made during the view-loading phase. Changes made after this (while animating to the new UIViewController) don’t appear. Because of React Native’s asynchronous nature, the view content isn’t created in the view-loading phase and so the didMoveToWindow of the SearchBarView fires too late to make changes to the navigation bar.

Will it be possible in React Native Fabric to load the initial rendered content synchronously, i.e., will the init of the RCTRootView include the rendered content?

- (void)loadView
{
    …
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:...];
    self.view = rootView;
}

React Native version:
N/A

Steps To Reproduce

1. Add a navigation library that uses the underlying native API
2. Write a component that adds a UISearchController to the navigation bar
3. You expect the search bar to appear in the navigation bar, but it doesn't

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[thymikee]

Thanks for raising this question. I think Discussions & Proposals repo is a better place to ask and discuss Fabric related stuff: https://github.com/react-native-community/discussions-and-proposals/issues/.

Can you move it there and cc shergin and ericlewis? These are their github handles, I'm not directly calling them on purpose but you can once this is in a correct place.

[grahammendick]

Thanks @thymikee, I raised react-native-community/discussions-and-proposals#130