CODEWITHSUNDEEP
androidreact-nativereact-native-router-flux
zbryan
zbryan

Reputation: 875

How to place tab bar at the bottom on android screen using router flux?

how do I place the tab bar at the bottom of the screen? I'm using react-native-router-flux 4.0.0-beta.6.

Here is my code:

export default class RouterComponent extends Component {



 render() {
    return (
  <Router>
    <Scene key='root' hideNavBar>
      <Scene key='tabBar' tabs={true} >
        <Scene key='color' title='Color' tabBarStyle={styles.tabStyle} >
          <Scene key='blue' component={Blue} title='Blue' />
          <Scene key='gray' component={Gray} title='Gray' />
          <Scene key='red' component={Red} title='Red' />
        </Scene>

        <Scene key='number' title='Number' tabBarStyle={styles.tabStyle}>
          <Scene key='one' component={One} title='One' />
          <Scene key='two' component={Two} title='Two' />
          <Scene key='three' component={Three} title='Three' />
        </Scene>

        <Scene key='shapes' title='Shapes' tabBarStyle={styles.tabStyle}>
          <Scene key='circle' component={Circle} title='Circle' />
          <Scene key='square' component={Square} title='Square' />
          <Scene key='triangle' component={Triangle} title='Triangle' />
        </Scene>
      </Scene>
    </Scene>
  </Router>
);


}

}

const styles = StyleSheet.create({
  tabStyle: {
    borderTopWidth: 0.5,
    borderColor: '#b7b7b7',
    backgroundColor: 'white',
    opacity: 1
  }

});

I'm not quite sure if this is possible in android as I can't find any solution in the web.

Upvotes: 3

Views: 2209

Answers (1)

Suraj Tiwari
Suraj Tiwari

Reputation: 386

<Router>
  <Scene key='root' hideNavBar>
    <Scene key='tabBar' tabs={true} tabBarPosition="bottom" >
      <Scene key='color' title='Color' tabBarStyle={styles.tabStyle} >
        <Scene key='blue' component={Blue} title='Blue' />
        <Scene key='gray' component={Gray} title='Gray' />
        <Scene key='red' component={Red} title='Red' />
      </Scene>

      <Scene key='number' title='Number' tabBarStyle={styles.tabStyle}>
        <Scene key='one' component={One} title='One' />
        <Scene key='two' component={Two} title='Two' />
        <Scene key='three' component={Three} title='Three' />
      </Scene>

      <Scene key='shapes' title='Shapes' tabBarStyle={styles.tabStyle}>
        <Scene key='circle' component={Circle} title='Circle' />
        <Scene key='square' component={Square} title='Square' />
        <Scene key='triangle' component={Triangle} title='Triangle' />
      </Scene>
    </Scene>
  </Scene>
</Router>

Just add the default property 'tabBarPosition' in your code

<Scene key='tabBar' tabs={true} tabBarPosition="bottom" >

Upvotes: 4

Related Questions