Skip to content
Easily handle Android back button behavior with React-Navigation.
JavaScript
Branch: master
Clone or download
Latest commit c11540b Jun 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Mar 16, 2018
BackHandler.android.js Change didFocus to willFocus (#13) Apr 25, 2019
BackHandler.ios.js Allow using the component without children Oct 18, 2018
BackHandler.web.js react-native-web support Mar 26, 2019
LICENSE Initial commit Mar 16, 2018
README.md Update README.md Jun 20, 2019
index.d.ts Add TypeScript typings Jun 14, 2018
index.js add ios and android impl Mar 16, 2018
package.json 1.3.2 May 9, 2019

README.md

react-navigation-backhandler

Easily handle Android back button behavior with React-Navigation.

Usage

The following snippet demonstrates the usage. Note that onBackButtonPressAndroid will only be called if SomeComponent is placed in a screen that is focused (the one user is directly interacting with).

Behind the scenes, the onBackButtonPressAndroid handler is registered before a screen is focused, and unregistered before going away from it, leaving you with a declarative interface to interact with. Internally, this package uses apis that are provided by react-navigation.

You may use AndroidBackHandler component anywhere in your app's React tree, it does not need to be placed directly in the screen component.

import { AndroidBackHandler } from 'react-navigation-backhandler';

class SomeComponent extends React.Component {
  onBackButtonPressAndroid = () => {
    /*
    *   Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event,
    *   and react-navigation's lister will not get called, thus not popping the screen.
    *
    *   Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
    * */

    if (youWantToHandleTheBackButtonPress) {
      // do something
      return true;
    }
    return false;
  };

  render() {
    return (
      <AndroidBackHandler onBackPress={this.onBackButtonPressAndroid}>
        <BodyOfYourScreen />
      </AndroidBackHandler>
    );
  }

You can also use the component "inline" without children: <AndroidBackHandler onBackPress={this.onBackButtonPressAndroid} />

Warning

The package was only tested to be used in screens in stack navigator, other use cases may not work.

You can’t perform that action at this time.