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 doesn't work with TabBarIOS #504

Closed
evanwalsh opened this issue Mar 30, 2015 · 4 comments
Closed

NavigatorIOS doesn't work with TabBarIOS #504

evanwalsh opened this issue Mar 30, 2015 · 4 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@evanwalsh
Copy link

Inside of my index.ios.js, I've got this:

render() {
    return (
      <TabBarIOS
        selectedTab={this.state.selectedTab}>
        <TabBarItemIOS
          name="search"
          icon={require('image!search')}
          selected={this.state.selectedTab === 'search'}
          onPress={() => {
            this.setState({
              selectedTab: 'search'
            });
          }}>
          <View>
            <NavigatorIOS
              ref="nav"
              initialRoute={{
                component: SearchScreen,
                title: config.names.search,
              }}
            />  
          </View>
        </TabBarItemIOS>
      </TabBarIOS>
    );
  }

When the tab is selected, it does not display the NavigatorIOS correctly. The navigation bar appears at the top (and the navigator's initial route component does get mounted). However, it is not displayed at all. It's just a blank space inside.

When I try rendering the initial route component outside of the NavigatorIOS, it works just fine. Is this intended behavior?

@pjjanak
Copy link

pjjanak commented Mar 30, 2015

Try giving your NavigatorIOS a style of flex=1:

...
<NavigatorIOS
    ref="nav"
    style={{
        flex:1,
    }}
   initialRoute={{
       ...
   }}
/>
...

@evanwalsh
Copy link
Author

@pjjanak Unfortunately, that does not fix it. Thank you for the suggestion, though!

@frantic
Copy link
Contributor

frantic commented Mar 30, 2015

Try @pjjanak's suggestion but remove wrapper <View> around <NavigatorIOS>

@evanwalsh
Copy link
Author

That works! Thanks!

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants