NavigatorIOS Inside TabBarIOS Takes Over Root Component, View Height Too Large #18031
Labels
Ran Commands
One of our bots successfully processed a command.
Resolution: Locked
This issue was locked by the bot.
Is this a bug report?
Yes.
Have you read the Contributing Guidelines?
Yes.
Environment
Packages: (wanted => installed)
Target Platforms: iOS 10 & 11 on simulator, iOS 11 on iPhone X
Steps to Reproduce
create-react-app MyProject
View
inside aNavigatorIOS
inside aTabBarIOS.Item
(inside aTabBarIOS
)style={{flex: 1}}
on theView
and on theNavigatorIOS
translucent={false}
on theNavigatorIOS
and on theTabBarIOS
Expected Behavior
With no transparency on the nav bar & tab bar, the
View
should be contained between the bottom of the navigation bar and the top of the tab bar, with theView
nested inside theNavigatorIOS
which is nested inside theTabBarIOS
. This structure is a common pattern in iOS design on larger projects.I would expect the hierarchy to be:
Actual Behavior
The
View
is the full height of the device. An inspection of the hierarchy when clicking on the View shows:The tab bar is not in the hierarchy. This seems to be why the
View
(Placeholder) extends past the tab bar with additional height that seems to equal the combined navigation bar and tab bar heights.Here's a screenshot from the inspector. It is tested on iPhone 5, 7 & X in the simulator, and iPhone X in the real world.
Reproducible Demo
Not sure if this snack helps as you may need the inspector, but here it is
The text was updated successfully, but these errors were encountered: