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>);
}
}
Answer from Guruparan Giritharan on Stack Overflow
🌐
Detox
wix.github.io › react-native-navigation › docs › customBackNavigation
Custom back navigation | React Native Navigation
Back navigation lets users move backwards through the screens they previously visited.
Top answer
1 of 2
4

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>);
}
}
2 of 2
0

You can use registerScreenPoppedListener:

Navigation.events().registerScreenPoppedListener((event) => {
    if (event.componentId === "my-screen-id") {
        // do something
    }
});
🌐
GitHub
github.com › wix › react-native-navigation › issues › 3187
how can i go back tab screen. · Issue #3187 · wix/react-native-navigation
May 10, 2018 - my nav stack is like this tab nav -> screen2 -> screen3 and i want to go back to "tab nav" when back button is clicked in screen2 or screen3 but I know back button event not support in IOS give me the solution Environment React Native Na...
Author   wix
🌐
GitHub
github.com › wix › react-native-navigation
GitHub - wix/react-native-navigation: A complete native navigation solution for React Native · GitHub
A complete native navigation solution for React Native - wix/react-native-navigation
Starred by 13.2K users
Forked by 2.6K users
Languages   MDX 38.3% | Objective-C++ 18.0% | TypeScript 13.3% | Java 13.1% | Kotlin 9.9% | Objective-C 3.8%
🌐
GitHub
github.com › wix › react-native-navigation › issues › 4776
How to override back button action [V2] · Issue #4776 · wix/react-native-navigation
February 22, 2019 - Issue Description [ENTER DESCRIPTION HERE] I am going to override back button's action. I used BackHandler. But I can not control back button's action, and backhandler was not called. How to solve this problem? Please help me. Thanks. En...
Author   wix
🌐
GitHub
github.com › wix › react-native-navigation › issues › 5136
Listen to native / default topBar back button navigation event · Issue #5136 · wix/react-native-navigation
May 23, 2019 - I wonder if this is possible to be notified when the native / default back button in topBar has been pressed? I tried: registerNavigationButtonPressedListener registerCommandListener But with no luck. I see this issue is closed, but with...
Author   wix
🌐
GitHub
github.com › wix › react-native-navigation › issues › 2679
Go Back To Tabs Screen · Issue #2679 · wix/react-native-navigation
February 8, 2018 - I am trying to figure out how to go back to the tabs screen from the a particular screen. Lets say I have this structure: -Root -Home Tab - Screen 1 - Inside Screen 1 -Search Tab -Profile Tab How t...
Author   wix
🌐
Medium
medium.com › react-native-training › explanation-of-react-native-navigation-wix-with-redux-deabcee8edfc
Explanation of React-Native-Navigation Wix with Redux | by Alvin Chau | React Native Training | Medium
October 12, 2018 - Redux is now set up with your wix navigator and a component which handles the navigation state. Now simply import the app component into index.ios.js and index.android.js. ... You can now run the application. ... On Android, when a user presses the hardware’s backbutton, the application is minimized but when it is re-opened, it behaves as if it is launching for the first time, bringing you back to the single screen view.
Find elsewhere
🌐
GitHub
github.com › wix › react-native-navigation › issues › 2197
How to override back button action · Issue #2197 · wix/react-native-navigation
November 20, 2017 - 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, onBackButton...
Author   wix
🌐
Detox
wix.github.io › react-native-navigation › 7.11.2 › docs › stack
Stack | React Native Navigation
In this case the back button will be visible automatically, clicking it will go back in the stack revealing the first (previous) child. Once the root child becomes visible, the back button is hidden. ... Buttons can be added to the right and left areas of the TopBar.
🌐
GitHub
github.com › wix › react-native-navigation › issues › 3230
goback does not work in react navigation v2 · Issue #3230 · wix/react-native-navigation
May 20, 2018 - hello I'm using react navigation on the site http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html I answered the projects I used navigation v1 but in navigation v2 goback() does not work in second page and when hardware back button the application close · The text ...
Author   wix
🌐
Detox
wix.github.io › react-native-navigation › docs › basic-navigation
Basic navigation | React Native Navigation
After pushing a screen, a back button is added automatically to the TopBar so the users can navigate easily back to the previous screen. You can read more about the stack layout here or dive right into the API here. Each React component registered with Navigation.registerComponent is assigned ...
🌐
GitHub
github.com › wix › react-native-navigation › issues › 4217
[V2] Override back button to return to home tab · Issue #4217 · wix/react-native-navigation
October 24, 2018 - Issue Description The documentation is lacking when it comes to overriding the hardware back button on Android. I'm looking to pop back to the Home tab when back is pressed from the root of other tabs (see the Youtube app for example). S...
Author   wix
🌐
GitHub
github.com › wix › react-native-navigation › issues › 1741
wix/react-native-navigation
August 24, 2017 - Toggle navigation · Sign in · Search or jump to... Search syntax tips · Sign in Sign up Reseting focus · You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert · {{ message }} wix / react-native-navigation Public ·
Author   wix
🌐
Detox
wix.github.io › react-native-navigation › api › options-backButton
Back Button Options | React Native Navigation
Controls the back button styling · Overrides the text that's read by the screen reader when the user interacts with the back button
🌐
Medium
medium.com › wix-engineering › react-native-navigation-v2-is-here-5b7c87f002a
React Native Navigation V2 is Here! | by Dror Biran | Wix Engineering | Medium
May 27, 2019 - From the Add Post screen, we can cancel or save and go back to the posts list. Here is the outline of what we are going to build: ... Preliminaries: Before you dive into this tutorial, you need to understand the basics of React Native.
🌐
Detox
wix.github.io › react-native-navigation › api › options-hardwareBackButton
Hardware Back Button Options | React Native Navigation
Controls hardware back button bottom tab selection behaviour, first will jump to first tab, previous will do reverse selection, exit (Default) will just exit the bottom tabs.
🌐
Detox
wix.github.io › react-native-navigation › docs › advanced-navigation
Advanced navigation | React Native Navigation
Lets return to the example code from the previous section (Basic navigation) and see how we can convert it to a tab-based application. We'll use the BottomTabs layout to display tabs at the bottom of the screen.