React-native-navigation: How to handle back event on android

[agumack]

Hi guy,

I tried but not working. How i can handle back event when user tap left back icon or on device.

onNavigatorEvent(event) {
        if (event.id == 'back') {
            alert('back');
        }
}

---

Environment

• React Native Navigation version: "^1.1.22"
• React Native version: "^0.43.4"
• Platform(s) (iOS, Android, or both?): ANDROID
• Device info (Simulator/Device? OS version? Debug/Release?): ALL

[jtibbertsma]

You can use

this.props.navigator.push({
  title: "Dope Title",
  screen: "example.SomeScreen",
  overrideBackPress: true
});

Doesn't work for overriding the back button on the iOS navbar though.

[agumack]

@jtibbertsma i have setting overrideBackPress but doesn't work.

[guyca]

@agumack The id is backPress and not back

onNavigatorEvent(event) {
        if (event.id == 'backPress') {
            alert('back');
        }
}

[em222iv]

I'm using the 1.1.13 release and this setting overrideBackPress: true does only override the click-event but does not generate an onNavigatorEvent.

                       navigator.push({
                         screen:'ad',
                         navigatorStyle:{
                           navBarHidden:true
                         },
                         overrideBackPress: true
                       })}

  this.props.navigator.setOnNavigatorEvent((event) => {
            console.log('setOnNavigatorEvent ', event.id)
            // if (event.id === 'backPress') {
            //   console.log('backPress')
            // }
        })

does not log anything
Any ideas?

[atoami]

Not working on Android.

overrideBackPress: true
event.id === 'backPress'

Works on Android but not on iOS

[guyca]

@jonathan68 This is a bit counter intuitive. Here's an example.
Use id: 'back' when defining the button, and listen to event.id === 'backPress' in onNavigatorEvent

[atoami]

Yes, I used them.

id: 'back'
event.id === 'backPress'

Sorry works on Android but not on iOS

[guyca]

Yes. backPress is a reserved word and works only on Android. I don't think you can prevent pop on iOS.
If you want to invoke some action when the screen is popped - you can dispatch an action from componentWillUnmount

[Agontuk]

@jonathan68, for IOS you have to add a navigator back button like this, and use event.id === 'back'

navigatorButtons: {
  leftButtons: [{
    id: 'back',
    title: 'Back',
    icon: require('back-icon.png')
  }]
 }

@guyca, about adding navigator buttons, how can I use both title & icon? Currently, if I provide an icon & title, only icon shows up. Basically I want the same back button UI (like when we're not overriding it).