Pressing the back button of Android in <Tabs/> minimized the application

[ndozhh]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.24
• react-native v0.50.4

Expected behaviour

In a Tabs component by pressing the Android back button on any Tab (except the first one), the focus returns to the first one (as in the TabBar page of the example).

Actual behaviour

By pressing the back button of Android in any Tab (except the first one), the application is minimized, use the onBack property in the second scene but it didn't work. I used,
onBack={ () => { }} (in previous versions it worked at least to prevent the app from closing)
and I used,
onBack={ () => {
Actions. pop();
}
and also
onBack={ () => {
Actions.popTo(sceneKey:"Accounts");
}
but no option works as expected.

Steps to reproduce

This is my code

return (
  <Router sceneStyle={styles.Router}>
    <Stack key="App" hideNavBar={true}>
      <Scene key="Home" component={Home} type="reset" initial />
      <Tabs key="TabBarApp" swipeEnabled tabBarStyle={styles.TabBar} labelStyle={styles.Options}
        activeBackgroundColor="rgba(66, 66, 66,0.2)" type="reset">
        <Stack key="StackCredentials"
          hideNavBar={true}
          tabBarLabel="Credenciales"
        >
          <Scene key="Accounts"
            component={Accounts}
            icon={({focused}) => (
              focused ?
              <Icon name="account-key" size={40} color="#006064" style={styles.IconOption}/> :
              <Icon name="account-key" size={40} color="#757575" style={styles.IconOption}/>
            )}
          />
        </Stack>
        <Stack key="StackOptions"
          hideNavBar={true}
          tabBarLabel="Opciones"
        >
          <Scene key="Options"
            component={Options}
            onBack={() => {
              Actions.popTo(sceneKey:"Accounts");
            }}
            icon={({focused}) => (
              focused ?
              <Icon name="menu" size={40} color="#006064" style={styles.IconOption}/> :
              <Icon name="menu" size={40} color="#757575" style={styles.IconOption}/>
            )}
          />
        </Stack>
      </Tabs>
    </Stack>
  </Router>
);

[ndozhh]

It's already fixed, using #2040 thanks to @hofuchi comment.

[esutton]

@ndozhh I am not seeing this fixed?

Using:

		"react": "^16.2.0",
		"react-native": "^0.52.2",
		"react-native-router-flux": "4.0.0-beta.27",

How do you exit app to Home screen without terminating the app?

I think I have tried all #2040 combinations and app is terminated and must relaunch from scratch.

Users may be in the middle of uploading or downloading and this kills the process. I expect the Android back button to minimize app and show home NOT terminate it.

1. Anytime I return false from either the router backAndroidHandler or the React Native BackHandler, my app terminates and closes completely.
2. Calling BackHandler.exitApp() and returning true still terminates app.

When I try to resume, I see the splash screen so I know app is restarting from scratch.

Anytime the app the back handler returns false the app is shut down and closed completyely.

      <router  backAndroidHandler={this.routerBackAndroidHandler} />

  routerBackAndroidHandler = () => {
    const result = Actions.pop();
    console.log('dbg: Actions.pop()', result);

    // returning false will close app completely
    return true;
  }

[esutton]

A Java fix is the only one that that works for me.

react-navigation/react-navigation#1372 (comment)

Putting snippet below in your MainActivity will prevent back button from killing the activity. I'm not sure when you click the back button, on which screen, or what does exiting app mean. The snippet above prevents back button from executing the change or exiting the app if AppStack is the top router.

@Override
public void invokeDefaultOnBackPressed() {
    moveTaskToBack(true);
}