React-native-router-flux: Back button will not send the app to the background

[SourceCipher]

Version

Tell us which versions you are using:

• react-native-router-flux 4.0.0-beta.40
• react-native 0.55.4

Expected behaviour

If you are navigating inside the app, after pressing multiple times back button on android, the app should be sent to the background the same way when you press the menu button

Actual behaviour

After pressing back button the app will come back to the initial screen (correct), but then it stays on the screen no matter how many times you press back button.

Just before this library was updated I had an issue where the back button would kill the app, so I fixed it and it was working perfectly. After updating flux to 4.0.0-beta.40 I have this issue .

Keep in mind that the scene structure did not change at all from what it was in the previous version

[matthewkwong2]

Same issue, when in the initial page, the hardware back button has no effect at all.

You may implement the BackHandler yourself, if you really need it right now.
https://facebook.github.io/react-native/docs/backhandler

[SourceCipher]

@matthewkwong2 I added backAndroidHandler in my route with the function

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

And it works fine for now, but I did not needed to do that before the new update

[mswokk]

Same here. RNRF 4.0.2.
Back button or Actions.pop() both not working to exit app on Android.
Any other workaround for now?

[daviscabral]

With the upgrade - probably the app structure will have to be updated.

Could you provide a sample of your structure so we can work with it to see how proceed and maybe add a migration guide?

[aksonov]

Closed because of inactivity

[EthanDM]

@aksonov @daviscabral I'm having this issue as well and I think I've narrowed it down:

onBackPress = () => navigationStore.pop();
https://github.com/RNRF/react-native-router-flux/blob/master/src/Router.js#L36

calls:

pop = ({ timeout, key, ...params } = {}) => {
    const res = filterParam(params);
    if (timeout) {
      setTimeout(() => this.pop(params), timeout);
    } else {
      this.dispatch(NavigationActions.back({ key }));
      if (res.refresh) {
        this.refresh(res.refresh);
      }
    }
    return true;
  };

https://github.com/RNRF/react-native-router-flux/blob/master/src/navigationStore.js#L952

This issue is that it needs to return false if the states are equal to exit the app, like it did with with 4.0.0 beta's:

return !isEqual(previous, getActiveState(this.state));
https://github.com/RNRF/react-native-router-flux/blob/4.0.0-beta.31/src/navigationStore.js#L1040

Edit: Making this change seems to be resetting the navigation state but not killing the whole app.

Edit2: ^ That might be unrelated as I am having that issue with the home button too.

[mswokk]

@aksonov @daviscabral
Please reopen this issue. It's not fixed in 4.0.5 yet
Here is minimal project to reproduce

Check InitialScreen
Android hardware backkey or Actions.pop() won't finish android app.
Not working

[bruno-edo]

Facing same problem.

Upgraded to 4.0.6 and my app won't go to background when I return false in backAndroidHandler's function like it did in the v4 beta versions.

[howieyoung]

Same issue with "react-native-router-flux": "^4.0.6"
However, I fixed it after I tried to set the backHandler to false manually:

       <Router
        sceneStyle={{ backgroundColor: '#fff' }}
        /*
        backAndroidHandler return true to stay in the app and return false to exit the app.
        Default handler will pop a scene and exit the app at last when the back key is pressed on Android.
        */
        backAndroidHandler={() => (false)}
      >

---

I wish that's something helpful for you guys.

[wmonecke]

@howieyoung I did this too and helped me exit the app. However I cannot register eventListener to react natives BackHandler. Somehow the callback function does not get called. It works with older RNRF versions.

"react": "16.6.3", "react-native": "0.57.8", "react-native-router-flux": "^4.0.6",

This is quiet annoying since I want to NOT exit the app directly (f.e. close a side menu if its opened) depending on the state of my component.

[howieyoung]

@wmonecke
Hopefully you've resolved the problem already.
But if you haven't, you can do something like this.

import { ..., BackHandler } from 'react-native';

class App extends Component {
componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
}

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