Description
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
- Add a navigation library that uses the underlying native API
- Write a component that adds a
UISearchControllerto the navigation bar - You expect the search bar to appear in the navigation bar, but it doesn't