react-native-router-flux tabbar not showing

Question

I'm having a trouble showing the tabbar in react-native-router-flux.

Im creating my scenes like this. I was able to show the first tab of the tabbar but can't make the tabbar to show at the bottom. Thanks for any help.

const scenes = Actions.create(
  <Scene key='root' tabs={true} unmountScenes
      component={connect(stateToProps)(Switch)}
      selector={props => props.isLoggedIn ? 'tabBar' : 'login'}>
    <Scene key='splash' component={Splash} title=''
      hideNavBar={false} />
    <Scene key='login' component={Login} title=''
      hideNavBar={true} />
    <Scene key='signup' component={Signup} title='Signup'
      hideNavBar={false} />
    <Scene key="tabBar" tabs icon={TabbarIcon} tabBarStyle={styles.tabBarStyle}>
      <Scene key='home' component={Home} title='Home' initial={true}
        icon={TabbarIcon} />
      <Scene key='diary' component={Diary} title='Diary'
        icon={TabbarIcon} />
      <Scene key='cabinet' component={Cabinet} title='Cabinet'
        icon={TabbarIcon} />
    </Scene>
  </Scene>
);

UPDATE: This has been closed, since I fix the issue. Thank you for the help.

Answer 1

You should remove tabs property from any scene but tabBar. Also remove icon property from tabBar scene. Everything else seems fine.

This should work:

const scenes = Actions.create(
  <Scene key='root' unmountScenes
      component={connect(stateToProps)(Switch)}
      selector={props => props.isLoggedIn ? 'tabBar' : 'login'}>
    <Scene key='splash' component={Splash} title=''
      hideNavBar={false} />
    <Scene key='login' component={Login} title=''
      hideNavBar={true} />
    <Scene key='signup' component={Signup} title='Signup'
      hideNavBar={false} />
    <Scene key="tabBar" tabs tabBarStyle={styles.tabBarStyle}>
      <Scene key='home' component={Home} title='Home' initial={true}
        icon={TabbarIcon} />
      <Scene key='diary' component={Diary} title='Diary'
        icon={TabbarIcon} />
      <Scene key='cabinet' component={Cabinet} title='Cabinet'
        icon={TabbarIcon} />
    </Scene>
  </Scene>
);