Description
Is this a bug report?
Yes.
Have you read the Contributing Guidelines?
Yes.
Environment
OS: macOS Sierra 10.13.3
Node: 9.5.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Packages: (wanted => installed)
expo: ^25.0.0 => 25.0.0
react: 16.2.0 => 16.2.0
react-native: 0.52.0 => 0.52.0
Target Platforms: iOS 10 & 11 on simulator, iOS 11 on iPhone X
Steps to Reproduce
create-react-app MyProject
- Add a
View
inside aNavigatorIOS
inside aTabBarIOS.Item
(inside aTabBarIOS
) - Set
style={{flex: 1}}
on theView
and on theNavigatorIOS
- Set
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 the View
nested inside the NavigatorIOS
which is nested inside the TabBarIOS
. This structure is a common pattern in iOS design on larger projects.
I would expect the hierarchy to be:
ExpoRootComponent
App (my main component)
TabBarIOS
NavigatorIOS
Placeholder (my View component)
Actual Behavior
The View
is the full height of the device. An inspection of the hierarchy when clicking on the View shows:
ExpoRootComponent
App
NavigatorIOS
Placeholder
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