The app always exit when I press back in any view

[SoldierCorp]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.24 (v3 is not supported)
• react-native v0.51.0

Expected behaviour

Don't exit the app and return to the previous view and push the views correctky

Actual behaviour

There is no actual animation when I'm opening a new view with push, and when I press back the app always exit at any point.

<Router createReducer={reducerCreate}>
  <Stack key='main'>
    <Scene key='splash' hideNavBar='true' type={ActionConst.REPLACE} component={Splash} />
    <Scene key='signup' hideNavBar='true' type={ActionConst.REPLACE} component={SignUp} />

    <Drawer
      hideNavBar
      key='drawer'
      contentComponent={SideMenu}
      drawerImage={require('./assets/images/icons/menu_trigger.png')}
      drawerWidth={300}
      drawerOpenRoute='DrawerOpen'
      drawerCloseRoute='DrawerClose'
      drawerToggleRoute='DrawerToggle'
    >

      {/* Home Tabs */}
      <Tabs
        key='home'
        tabs
        tabBarStyle={styles.tabBarStyle}
        hideNavBar='true'
        showLabel={false}
        tabBarPosition='bottom'
        titleStyle={titleStyle}
        navigationBarStyle={navBar}
        onRight={() => Actions.push('filter')}
        rightButtonTextStyle={filterTextStyle}
        hideBackImage={true}
        leftButtonImage={require('./assets/images/icons/menu_trigger.png')}
        rightButtonImage={require('./assets/images/icons/filter_icon.png')}
        activeBackgroundColor='#262a62'
        inactiveBackgroundColor='#444881'
        lazy
      >
        <Scene
          key='businesslist'
          component={BusinessList}
          icon={TabIcon}
          title='🏬 Negocios'
        />
        <Scene
          key='featured'
          component={Featured}
          title='♥ Destacados'
          icon={TabIcon}
          passProps={true}
        />
        <Scene
          key='events'
          component={Events}
          title='🎉 Eventos'
          icon={TabIcon}
          passProps={true}
        />
      </Tabs>

      <Scene
        key='business'
        component={Business}
        getTitle={props.title}
        navigationBarStyle={navBar}
        titleStyle={titleStyle}
        navBarButtonColor='#FFF'
        passProps={true}
        renderLeftButton={() =>
          <TouchableOpacity onPress={Actions.pop}>
            <Feather style={styles.leftButton} name='x' size={30} color='white' />
          </TouchableOpacity>
        }
        onLeft={Actions.pop}
      />

      <Scene key='contact' hideNavBar='true' backTitle={'Regresar'} component={Contact} passProps={true} />
      <Scene key='tutorial' hideNavBar='true' backTitle={'Regresar'} component={Tutorial} passProps={true} />
      <Scene key='filter' component={Filter} passProps={true} navigationBarStyle={navBar}
        title={'Filtros de búsqueda'}
        titleStyle={titleStyle}
        leftButtonImage={require('./assets/images/icons/close_icon.png')}
        onLeft={Actions.pop}
        type={ActionConst.REPLACE}
      />
      <Scene key='team' hideNavBar='true' backTitle={'Regresar'} component={Team} passProps={true} />



      {/* Gifts Tabs */}

      <Tabs
        key='gifts'
        tabs
        tabBarStyle={styles.tabBarStyle}
        showLabel={false}
        tabBarPosition='bottom'
        titleStyle={titleStyle}
        navigationBarStyle={navBar}
        hideBackImage={true}
        leftButtonImage={require('./assets/images/icons/menu_trigger.png')}
        activeBackgroundColor='#262a62'
        inactiveBackgroundColor='#444881'
        type={ActionConst.PUSH}
        lazy
      >
        <Scene
          key='allgifts'
          component={Gifts}
          icon={TabIcon}
          title='🎁 Regalos disponibles'
        />
        <Scene
          key='mygifts'
          component={MyGifts}
          title='🎁 Mis regalos'
          icon={TabIcon}
          passProps={true}
        />
      </Tabs>
    </Drawer>
  </Stack>
</Router>

This is my index.android.js

render() { return ( <Router /> ); }

[Blapi]

You need to handle to BackButton within your Router, just add this where you implemeted it :

  onBackPress() {
    if (Actions.state.index === 0) {
      return false
    }
    Actions.pop()
    return true
  }

...
...

<Router
  backAndroidHandler={this.onBackPress}
  createReducer={reducerCreate}>

If you want to do more about the transitions, please check #2628

[SoldierCorp]

Thank you, now it's working!

But I still have the issue regarding the push of the views... the views aren't being pushed, looks like they are being replaced because there is no animation and when I go back after "push" 2 views, it's returning to the home and not to the previous one.

[Blapi]

If you want to do more about transitions, please have a look at #2628, it will help you with this!

The other part with returning to home when pressing backButton is weird.. I see you already implemented the routerReducer, have a look at the logs : is there a list of routes similar as it should be with what you are doing in your navigation logic?

[SoldierCorp]

The issue I have began when I change from react-native-drawer to use the Drawer of this package, as you can see my index.android.js contains only this render() { return ( <Router /> ); }.

My logs are showing that I'm pushing the views not replacing them.

And in order to load the home of my app, I'm loading a very first Scene which is the splash

<Scene key='splash' hideNavBar='true' type={ActionConst.REPLACE} component={Splash} />

In that Component I'm reseting to drawer to avoid the user perform back in home and return to the splash scene with this

Actions.reset('drawer')

Probably I'm making a mistake there.

What do you think?

[SoldierCorp]

Are there any comments regarding my last question?

[aksonov]

I can't reproduce it with example project.

[SoldierCorp]

Regarding the original issue, I just realised that is actually not working... I'm trying to back to a view but always replacing the views to the first one and it's never entering to the onBackPress, don't know why it's failing like that... I started a new project and it's the same.

I remember with the v3 version everything was working perfectly, I know you cannot reproduce without an example but I'm not the only with that issue and you should to check creating a fresh project and it's actually not working as v3 did.