Search code examples
javascriptreact-nativereact-native-router-flux

Why is my TabBar not rendering correctly in top position in react native router flux?

My tab bar will render fine when tabBarPosition is set to bottom but does not display correctly when I set the tabBarPosition to top.

Here is my code for the bottom position (this is for the dashboard scene).

   <Provider store={store}>
    <Router>
      <Scene key="root" hideNavBar={true}>
        <Scene key="tabbar" tabs={true} tabBarStyle={{ backgroundColor: '#eee' }} showLabel={false}>
          <Scene key="search" title="Search" icon={TabIcon} initial={true}>
            <Scene key="searchHome" component={HomeScene} title="Search" initial={true}/>
            <Scene key="searchResults" component={SearchResultsScene} title="Search Results" />
          </Scene>
          <Scene key="dash" icon={TabIcon} title="Dashboad">
              <Scene key="dashTabs" tabs={true} tabBarPosition="bottom" tabBarStyle={{ backgroundColor: '#eee' }} showLabel={false} >
                <Scene key="profile" component={ProfileScene} title="Profile" icon={TabIcon} initial={true}/>
                <Scene key="messaging" component={MessagingScene} title="Messaging" icon={TabIcon}/>
                <Scene key="settings" component={SettingsScene} title="Settings" icon={TabIcon}/>
              </Scene>
          </Scene>
          <Scene key="auth" title="Login" icon={TabIcon}>
            <Scene key="login" component={LoginScene} title="Login" />
          </Scene>
        </Scene>
      </Scene>
    </Router>
  </Provider>

This is how it looks and how I would like it to behave but obviously with the top tab bar right below the navbar.

tabBarPosition="bottom"

Tab bar position top

 <Scene key="dashTabs" tabs={true} tabBarPosition="top" tabBarStyle={{ backgroundColor: '#eee', top: 100 }} showLabel={false} >

enter image description here

I set the top value to 100 just for demonstration purposes. I would use a dynamic value based on the height of the navbar.

You can see that the labels don't show up, there is a margin between the top of the screen and the navbar, there is a yellow bottom border on the active tab and the TabIcon component is not rendered.

Is this because top tab bar is the default for Android and the styling is different than the bottom bar (default for Ios)?

Any ideas?

Thanks!

"react": "16.0.0",
"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2"
Solution

  • Use this in the following way

    <Scene key="dash" icon={TabIcon} title="Dashboad">
              <Scene key="dashTabs" tabs={true} tabBarPosition="bottom" tabBarStyle={{ backgroundColor: '#eee' }} showLabel={false} showIcon activeTintColor="purple"
              inactiveTintColor="black"
              labelStyle={{ flexWrap: 'nowrap' }}
              indicatorStyle={{ backgroundColor: 'transparent' }} >
                <Scene key="profile" component={ProfileScene} title="Profile" icon={TabIcon} initial={true}/>
                <Scene key="messaging" component={MessagingScene} title="Messaging" icon={TabIcon}/>
                <Scene key="settings" component={SettingsScene} title="Settings" icon={TabIcon}/>
              </Scene>
          </Scene>

    Use showIcon to show your icons and background colours will be applied through styles. Refer to this link for tabBarPosition='Top' props that can be used in case of tab bar position set to top TabBar position=top props that can be used.