React-native-router-flux: How to use backAndroidHandler onBackAndroid onExitApp in Router?

Created on 16 Aug 2016  ·  9Comments  ·  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

  • react-native-router-flux v3.34
  • react-native v0.3.1

How to use backAndroidHandler onBackAndroid onExitApp in Router?

I want to use it:

BackAndroid.addEventListener('hardwareBackPress', function() {
if (navigator && navigator.getCurrentRoutes().length > 1) {
navigator.pop();
return true;
}
return false;
});

but I don‘t konw navigator where are from

const backAndroidHandler=()=>{
ToastAndroid.show('backAndroidHandler',ToastAndroid.SHORT);
return true
}

...
...

Most helpful comment

I think these were only added in v3.35

It should give the behaviour you mention out of the box now.

An example of adding a confirmation dialogue when exiting.

const onExitApp = () => {
  Alert.alert(
    'Exit',
    'Are you sure you want to exit this app',
    [
      { text: 'Cancel', onPress: () => {} },
      { text: 'YES', onPress: () => BackAndroid.exitApp() },
    ]
  );
  return true;
};

    <Router
      onExitApp={onExitApp} 
      ...

All 9 comments

I think these were only added in v3.35

It should give the behaviour you mention out of the box now.

An example of adding a confirmation dialogue when exiting.

const onExitApp = () => {
  Alert.alert(
    'Exit',
    'Are you sure you want to exit this app',
    [
      { text: 'Cancel', onPress: () => {} },
      { text: 'YES', onPress: () => BackAndroid.exitApp() },
    ]
  );
  return true;
};

    <Router
      onExitApp={onExitApp} 
      ...

I also encounter this problem. I don't know how to get the current stack

Please help, how can we get the current stack? Should this be a parameter of the function?

@aksonov This really puzzles me, not having the "route stack" as a parameter of the function I could not find any way to create conditionals in order for the BACK to be "true" or "false" based on the scene (I want custom logic for the initial "login" scene, and the for the next scene which should not let you move back to login).

Do I miss something on how this is implemented?

You can use

Actions.yourPage({type: 'reset'});
or
Actions.yourPage({type: 'replace'});

when switching to stop the routes stacking

@sattaman Thanks but I want to keep the BACK functionality for all other cases.

I want custom logic for the initial "login" scene, and the for the next scene which should not let you move back to login, BUT BACK should be working as usual on next scenes (i.e. other than the 1st and 2nd).

Isn't there a way to just know where I am?

I may not be fully understanding but can you not just use reset when you don't want the back button , and call it normally elsewhere?

So

Login -> Actions.home({type: 'reset'});

Home -> Actions.scene1();
Scene1 -> Actions.scene2(); <- back button is displayed here but not when coming from Login to home?

@sattaman I followed your advice and my use case is now implemented. Thank you.

P.S. Still I think that If someone wanted to know where she is heading to after pressing the hardware back, then she would not be able to know it beforehand (and stop the back process). Maybe this needs to be addressed somehow.

@af7 Check this

Was this page helpful?
0 / 5 - 0 ratings