React native hardware back button is not working

Question

I'm working on react native Android and face problem for hardware back button my react native version is 0.44.2 and I'm using BackHandler below is my code for the back button:

BackHandler.addEventListener("hardwareBackPress", () => {
  if (this.navigator && this.navigator.getCurrentRoutes().length > 1){this.navigator.pop()
return true // do not exit app
} else {
return false // exit app
}})

I got the following error:

Answer 1

You need to use BackAndroid API of React Native.

BackAndroid.addEventListener('hardwareBackPress', () => {

    var flag = false;

    if(_route.name==="newbooking"){
        Alert.alert(
            "Confirmation", 
            "Are you sure you want to cancel?",
            [
                {text: 'No', onPress: () => console.log('OK Pressed!')},
                {text: 'Yes', onPress: () => {_navigator.pop();}}
            ]
        );
        return true;
    }
    else{
        flag = true;
    }
    if (_navigator.getCurrentRoutes().length === 1  ) {
        return false;
    }
    if(flag){

        _navigator.pop();
        return true;
    }

});

Answer 2

You can use React-Navigation which handles hardware back press automatically. If you are using it for navigation.

Answer 3

Create new file:

import {BackHandler} from 'react-native';
/**
 * Attaches an event listener that handles the android-only hardware
 * back button
 * @param  {Function} callback The function to call on click
 */
const handleAndroidBackButton = (callback: any) => {
    BackHandler.addEventListener('hardwareBackPress', () => {
        callback();
    });
};
/**
 * Removes the event listener in order not to add a new one
 * every time the view component re-mounts
 */
const removeAndroidBackButtonHandler = () => {
    BackHandler.removeEventListener('hardwareBackPress', () => {});
};
export {handleAndroidBackButton, removeAndroidBackButtonHandler};

and in your main render file (app.tsx) add the following code:

  import {handleAndroidBackButton, removeAndroidBackButtonHandler} from "./utils/back-button.handler";
  public componentDidMount(): void {
        handleAndroidBackButton(false);
    }

Answer 4

import { BackHandler, View, Text, } from 'react-native';
import React, { Component } from 'react';

export default class App extends Component {
    constructor(props) {
        super(props)
        this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    }

    componentDidMount() {
        try {
            BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
        }
        catch (e) {

        }
    };

    componentWillUnmount() {
        try {
            BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
        }
        catch (e) {

        }
    };
    handleBackButtonClick() {
        try {
            this.props.navigation.navigate('Home');
            return true;
        }
        catch (e) {

        }
    };

    render() {
        return (
            <View style={{ flex: 1, textAlign: "center" }}>
                <Text>Hardware back button Example</Text>
            </View>
        )
    }
};

This solution is working for me.In----------------- please add your screen name where you want to navigate.