React-native android back button in react-navigation

Question

Well, I have a react-native app with multiple screen, each screen having a top bar where a back button is situated, it's main behavior is that the app returns to the main screen when this button is pressed. What I want to do is to copy this behavior to the hardware back button (now by pressing on hardware back button the app closes), how can I do this?

UPDATE:

I'm using react-navigation and redux

Solution 1

You can:

1. import the BackHandler from "react-native"
2. Add in the componentDidMount (componentWillMount deprecated) BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
3. Implement handleBackButton like this handleBackButton(){ this.props.navigation.popToTop(); return true; }

popToTop goes back to the first screen in the stack.

If you are using react-navigation with Redux you should implement the popToTop as an action to dispatch.

Solution 2

You can do it by below example

import { BackHandler } from 'react-native';

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

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

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

  backButtonClick(){
    if(this.props.navigation && this.props.navigation.goBack){
      this.props.navigation.goBack(null);
      return true;
    }
    return false;
  }
}

Solution 3

Implementation with react Hooks in functional components:

useEffect(() => {
    function handleBackButton() {
      navigation.navigate('register-phone');
      return true;
    }

    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);

    return () => backHandler.remove();
  }, [navigation]);

don't forget to remove the listener on Unmount.

based on the react-native documentation.

Solution 4

Import this package

import { BackHandler } from "react-native";

Bind the function in the constructor

this.exitApp = this.exitApp.bind(this);

Your back button

<Button transparent onPress={this.exitApp}>
    <Icon name="arrow-back" />
</Button>

Handle back press and close the app

exitApp() {
    BackHandler.exitApp()
}

// Add the listener when the page is ready
componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.exitApp);
}

// Remove the listener before removing
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.exitApp);
}

The way of displaying the button might be different but this will work! If any issue write in the comments.

Solution 5

So if you are using react-navigation and redux, you can take a look at docs - Handling the Hardware Back Button in Android

YourComponent.js:

import React from "react";
import { BackHandler } from "react-native";
import { NavigationActions } from "react-navigation";

/* your other setup code here! this is not a runnable snippet */

class ReduxNavigation extends React.Component {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    /* more setup code here! this is not a runnable snippet */ 
    return <AppNavigator navigation={navigation} />;
  }
}

View more solutions

Comments

[Rajendran Nadar]

componentWillMount is deprecated it will be removed in later version use componentDidMount instead

[Catalin Iancu]

return true; prevents the default behaviour of the back button. Just what I needed, thanks!