Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NavigatorIOS Inside TabBarIOS Takes Over Root Component, View Height Too Large #18031

Closed
joeponzio opened this issue Feb 20, 2018 · 1 comment
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@joeponzio
Copy link

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

  1. create-react-app MyProject
  2. Add a View inside a NavigatorIOS inside a TabBarIOS.Item (inside a TabBarIOS)
  3. Set style={{flex: 1}} on the View and on the NavigatorIOS
  4. Set translucent={false} on the NavigatorIOS and on the TabBarIOS

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.

screen shot 2018-02-20 at 5 14 48 pm

Reproducible Demo

Not sure if this snack helps as you may need the inspector, but here it is

@react-native-bot
Copy link
Collaborator

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to ContributeWhat to Expect from Maintainers

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 24, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Feb 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

2 participants