Override Back Button Wix React Native Navigation V2?

I am currently transitioning from Wix RNN V1 to V2, and so far I've managed to find the appropriate replacement APIs, except for overriding the back button on Android. In V1 we cou

Solution 1:

I had the same issue and the only way i could override the backpress behavior on both platforms is to replace the left back button with custom button and use the BackHandler of react native for the hardware button in Android. The code is as below.

Component A

//Navigate to component B from A
Navigation.push(this.props.componentId, {
component: {
    name: 'ComponentB',
    options: {
        topBar: {
            leftButtons: [{
                id: 'backPress',
                text: 'Back',
                icon: require('backbutton.png')
            }]
        },
    }
}
});

Component B

import React, { PureComponent } from 'react';
import { View, BackHandler } from 'react-native';
import { Navigation } from 'react-native-navigation';

export default class ComponentB extends PureComponent {

constructor(props) {
    super(props);
    Navigation.events().bindComponent(this);
}

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}

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

navigationButtonPressed({ buttonId }) {
    switch (buttonId) {
        case 'backPress': {
            this.handleBackPress();
            break;
        }
    }
}

handleBackPress = () => {
    //Custom logic

    //Go back if required
    Navigation.pop(this.props.componentId)

    //Stop the default navigation
    return true;
};

//Render component
render() {
    return (<View></View>);
}
}

Solution 2:

You can use registerScreenPoppedListener:

Navigation.events().registerScreenPoppedListener((event) => {
    if (event.componentId === "my-screen-id") {
        // do something
    }
});