Hook to handle back press on Android in React Native with an exit alert.

handleBackPress.js

import { Alert, BackHandler } from "react-native";

/*
* If we are using React Native Navigation
* the BackHandler.exitApp() will in some
* cases invoke a pop instead of exiting 
* the application. Using the following
* library solves this issue:
*
* import RNExitApp from "react-native-exit-app";
* https://www.npmjs.com/package/react-native-exit-app
*
*/

/**
 * Handlers Android back button press
 *
 * @param appName
 *
 * @return {boolean}
 */
export const handleBackPress = (appName = "Reward Me Now") => {
  Alert.alert(`Exit ${appName}`, `Do you want to exit the '${appName}' app?`, [
    {
      text: "Cancel"
    },
    {
      text: "Leave",
      style: "destructive",
      onPress: () => BackHandler.exitApp()
    }
  ]);
};

useHandleBackPressWithExitAlert.js

import React, { useRef, useEffect } from "react";
import { BackHandler, Platform } from "react-native";
import {
  useNavigationComponentDidAppear,
  useNavigationComponentDidDisappear
} from "react-native-navigation-hooks";

/**
 * PLAIN REACT NATIVE
 *
 * Hanldes the back press on Android with an exit alert
 *
 * (React Native where each screen is unmounted / mounted)
 * 
 * @param {*} appName 
 * @param {*} disabled 
 */
export function useHandleBackPressWithExitAlert(appName, disabled){
  const backHandler = useRef(null);

  useEffect(() => {
    if(!disabled && Platform.OS === "android"){
      backHandler.current = BackHandler.addEventListener("hardwareBackPress", () => handleBackPress(appName));

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

/**
 * REACT NATIVE NAVIGATION 
 *
 * Hanldes the back press on Android with an exit alert
 * 
 * (Uses React Native Navigation methods to remove functionality
 * when screen is hidden, otherwise the behaviour will persist
 * when if we push a screen onto the stack)
 * 
 * @param {*} componentId 
 * @param {*} appName 
 * @param {*} disabled 
 */
export function useHandleBackPressWithExitAlert(componentId, appName, disabled = false){
  const backHandler = useRef(null);

  useNavigationComponentDidAppear(() => {
    if(!disabled && Platform.OS === "android"){
      backHandler.current = BackHandler.addEventListener("hardwareBackPress", () => handleBackPress(appName));
    }
  }, componentId)

  useNavigationComponentDidDisappear(() => {
    if(!disabled && Platform.OS === "android" && backHandler.current !== null){
      backHandler.current.remove();
    }
  }, componentId);
}