navigation in native base footer tab by react-native-router-flux

i am new to react native. in my react project i use native base footer tab and i need to navigate between tabs by router flux because init project by router flux. can someone help me? thanks.

<Footer>
    <FooterTab style={{ backgroundColor: '#FB8700' }}>
        <Button vertical onPress={() => { this.setState({searchactive:true,addactive:false,settingactive:false,Selecteditem:'Search'}) }} active={this.state.searchactive} >
            <Icon name="search" type='Ionicons' style={tabsstyle.IconS} />
            <Text style={tabsstyle.TextS}>search</Text>
        </Button>
        <Button vertical onPress={() => { Actions.add(),this.setState({addactive:true,searchactive:false,settingactive:false,Selecteditem:'Add'}) }} active={this.state.addactive} >
            <Icon name="person-add" type='Ionicons' style={tabsstyle.IconS} />
            <Text style={tabsstyle.TextS}>add</Text>
        </Button>
        <Button vertical onPress={() => { this.setState({settingactive:true,addactive:false,searchactive:false,Selecteditem:'Setting'}) }} active={this.state.settingactive}>
            <Icon name="settings" style={tabsstyle.IconS} />
            <Text style={tabsstyle.TextS}>setting</Text>
        </Button>
    </FooterTab>
</Footer>

and app.js code

      <Router hideNavBar="true">
        <Scene key="root">
          <Scene key="index" component={index} hideNavBar={true} initial={true} />
          <Scene key="login" component={login} title="" />
          <Scene key="register" component={register} title="" />
          <Scene key="forgetpass" component={forgetpass} title="" />
          <Scene key="tabs" component={tabs} hideNavBar={true} title="" />
          <Scene
            key="tabbar"
            tabs={true}
            tabBarStyle={{ backgroundColor: '#FFFFFF' }}
          >
              <Scene key="search" component={search} hideNavBar={true} title="" />
              <Scene key="add" component={add} hideNavBar={true} title="" />
              <Scene key="setting" component={setting} hideNavBar={true} title="" />
          </Scene>
        </Scene>

      </Router>

Solution

you can add the following prop, tabBarComponent, after declaring <Footer /> as a constant, like this:

<Scene
  key="tabbar"
  tabs={true}
  tabBarStyle={{ backgroundColor: '#FFFFFF' }}
  tabBarComponent={footer} // <-- this
>

i've also included a snack where you can experiment react-native-router-flux further. have fun!