Exit app when back button is pressed twice in React Native.

In this post I will discuss how you can implement "exiting your app when back button is pressed twice".

So if your user is using your app and accidently presses the back button, the app will exit. So to warn the user about exiting the app we can use BackHandler provided by the react native library.

So the flow is when the user touches the back button it will not exit the app and when he double touches it, we will be alerting him to either go back to the app or exit the app.

So below is the code to implement it.

import React, { useEffect } from "react";
import { Text, View,BackHandler, Alert } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

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

  return (
    <View >
      <Text style>Gautham's Backhandler Example </Text>
    </View>
  );
};


export default App;

Implement it in the App.js where you will be defining navigators.

So here we are adding event listener called "hardwareBackPress" to listen to users' action on back button and call the function in useEffect.

So thats how you can easily implement "exiting your app when back button is pressed twice" functionality in your react native app.

This may not be that much significant for small apps. But if people are using your app to enter data inputs and accidently touched the back button and the app closes, it may provide for bad UX experience.

Best documentation on React BackHandler Functionality I referrerd to :
React Native Doc

To know more about React & React Native you can checkout my courses in Udemy.

https://www.udemy.com/course/react-native-for-absolute-beginners-with-react-hooks/

Comments

[Vincent Eliezer]

Hey thanks for this but I have a question, I have more than one screen if I implement this function and navigate to other screens and press the hardware back button the Alert pops...I want this to only happen on my homescreen not other screens....I'll appreciate if you could help!

[Gautham Vijayan]

Hey Vincent. You have to use the useEffect hook code mentioned here only in your Home screen component and not in the App.js. This will let you acheive the function you have mentioned here.

[Shailesh Vasandani]

Cool implementation! It's always good to keep in mind when users accidentally leave a page, especially when they're entering lots of data.

Thanks for sharing!

[Gautham Vijayan]

Yeah I forgot to implement this functionality in my app and my friend pointed it out to implement it in the next update. Glad you liked it.