React-native-navigation: How to override back button action

[ugendrang]

Platform : android
react-native-navigation: 1.1.x

By default back button action is to pop to previous screen.

But I would like to override this back button action and would like to call below method to perform custom action,
onBackButtonPress(){
doSomeOperation();
this.props.navigator.pop();
}

Is it possible to override default back button action?

[Fuhrmann]

Yes you can. I do it this way:

In your screen:

import { BackHandler } from 'react-native';

...
...

constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}

onNavigatorEvent(event) {
    switch (event.id) {
      case 'willAppear':
        this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
        break;
      case 'willDisappear':
        this.backPressed = 0;
        this.backHandler.remove();
        break;
      default:
        break;
    }
  }

  handleBackPress = () => {
    if (this.backPressed && this.backPressed > 0) {
      this.props.navigator.popToRoot({ animated: false });
      return false;
    }

    this.backPressed = 1;
    this.props.navigator.showSnackbar({
      text: 'Press one more time to exit',
      duration: 'long',
    });
    return true;
  }

[ugendrang]

Thankyou @Fuhrmann, its working.

[JFE84]

@Fuhrmann any way to make this with the app back button too? it works with the phone back button but the app back button keeps going to the previous screen

[Fuhrmann]

@JFE84 I am not on pc right now, but maybe you could try this: https://github.com/wix/react-native-navigation/issues/1135#issuecomment-319724858.

Set an ID to your back button and catch the event in the navigator using setOnNavigatorEvent. I didn't test this approach, so I don't know if it will work.

[JFE84]

@Fuhrmann yes that works, thanks. I was having issues with this solution because I was using id='back' and it wasn't working. It was doing the default thing to go previous screen and onNavigatorEvent wasn't even getting the event
When I tried id=anyWordThatIWant it worked. Guess it is because id='back' is reserved and it automatically triggers the default action to go to the previous screen

[Fuhrmann]

@JFE84 Nice, good to know! :)

[Annihil]

Now that overrideBackPress: true is bugged on Android, @Fuhrmann solution has saved me, thanks! 👍

[shrivastavaanurag]

thank you @Fuhrmann you save my day.

[ashokkumar88]

@Fuhrmann I have to put the above code in all screens?

[Fuhrmann]

@ashokkumar88 I do not work with RN anymore, but as I remember yes. I guess it depends on your screens setup.

[ashokkumar88]

@Fuhrmann Thanks for quick reply. So did you find any good alternative for React Native. If yes, then please suggest.

[Fuhrmann]

@ashokkumar88 Unfortunately not. I had to stick with Android development.

[HRCJ7]

@Fuhrmann can you check this issue.I used your solution.But It did not work for me :( .
Here I attched stckowerflow link stackoverflow

[ashokkumar88]

@HRCJ7 after login you have to call this.props.navigator.resetTo({ screen:SCREEN});

[Lokendra-rawat]

how to do this on the v2 version ?

[crushy26]

@Lokendra-rawat did you find a way for intercepting back button? I want to override back hardware press

[nicoara]

@Fuhrmann 's answer is for Android only, although the question is for iOS as well.

[aayushisolanki28]

Yes you can. I do it this way:

In your screen:

```
import { BackHandler } from 'react-native';

...
...

constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}

onNavigatorEvent(event) {
switch (event.id) {
case 'willAppear':
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
break;
case 'willDisappear':
this.backPressed = 0;
this.backHandler.remove();
break;
default:
break;
}
}

handleBackPress = () => {
if (this.backPressed && this.backPressed > 0) {
this.props.navigator.popToRoot({ animated: false });
return false;
}

this.backPressed = 1;
this.props.navigator.showSnackbar({
  text: 'Press one more time to exit',
  duration: 'long',
});
return true;

}
```Could you explain with some better example .I'm unable to understand this.
I used transitionConfig to add animation while switching between the screens.To clear the previous screen stack I used StackActions but this removed my animation between the screens.

[cinder92]

how to use this behavior on V2 aswell?

[witalobenicio]

@cinder92 doesn't have this on v2. You have to override backButton icon, by passing an id and an icon.