Nanoseconds Produce Minutes

    exit-on-double-back

    1.0.1 • Public • Published

    exit-on-double-back

    A react-native module to exit an app when the back button is pressed twice on android device.

    Note: This module only works with react-navigation(as of now) and your navigator should be integrated to redux store.

    Why do I need this module?

    If you need to perform some action on your app when the back button is pressed twice on the landing screen of the application, this module is for you.

    Props

    This module accepts the following props:

    Prop Explanation Default Value Type
    toastMessage Message to be displayed on the toast when the back button is pressed on the landing screen. 'Press back again to exit the app' string
    doubleBackInterval Interval(in ms) in which JS will wait for second back press 3000 number
    exitableRoutes Route names where toast message will be shown on first back press ['Landing'] Array
    onDoubleBack Function to be called on double back press in the passed interval. If no function is passed, the app will exit. BackHandler.exitApp Function
    backHandler Function to be called on normal back presses of the application. noop Function
    nav Your router state from the redux store(will be used to get current route name) {} Object

    Demo

    Usage

    After integration react-navigation with redux store, your App would look something like this:

    class App extends React.Component {
      render() {
        const {dispatch, nav} = this.props;
        return (
          <AppNavigator navigation={addNavigationHelpers({dispatch, state: nav})} />
        );
      }
    }
    const mapStateToProps = (state) => ({
      nav: state.nav
    });

    To use this component, just wrap this component around ExitOnDoubleBack and pass the required props.

    import ExitOnDoubleBack from 'exit-on-double-back';
     
    class App extends React.Component {
      render() {
        const {dispatch, nav, goBack} = this.props;
        return (
          <ExitOnDoubleBack exitableRoutes={['home']} nav={nav} backHandler={goBack}>
            <AppNavigator navigation={addNavigationHelpers({dispatch, state: nav})} />
          </ExitOnDoubleBack>
        );
      }
    }
    const mapStateToProps = (state) => ({
      nav: state.nav
    });
    const mapDispatchToProps = (dispatch) => ({
      goBack: () => this.props.dispatch(NavigationActions.back())
    })

    If you wish to override the default behavior of exiting the app or add your own message/interval, you can pass additional props.

    <ExitOnDoubleBack interval={2000} toastMessage='Please don\'t go'  exitableRoutes={['home']} nav={nav} backHandler={goBack}>
      <AppNavigator navigation={addNavigationHelpers({dispatch, state: nav})} />
    </ExitOnDoubleBack>

    That's all, your app now supports double back press to exit feature.

    Note: I have used JS setTimeout instead of Timers. The Timer module is a react mixin and react team is discouraging the use of mixins in favour of higher order components. I am handling clearing the timeout as well whenever the action is done or the component unmounts.

    Don’t forget to hit star if you like my work :)

    Install

    npm i exit-on-double-back

    DownloadsWeekly Downloads

    8

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • rahulgaba