The code below shows a working, but inefficient implementation of an Android BackHandler within React Native to have the app exit after two presses in two seconds. This is implemented using React hooks within the main functional component of the app.
However, due to dependency on a state variable recentlyPressedHardwareBack, the useEffect hook will cleanup then run each time the state changes, causing the BackHandler event listener to be detached and re-attached whenever the back button is pressed. How do you set up this event listener just once without constant creation and deletion, while allowing it to access a changing component state?
const [recentlyPressedHardwareBack, setRecentlyPressedHardwareBack] =
useState(false);
useEffect(() => {
const backHandler = BackHandler.addEventListener(
'hardwareBackPress',
() => {
// Exit app if user pressed the button within last 2 seconds.
if (recentlyPressedHardwareBack) {
return false;
}
ToastAndroid.show(
'Press back again to exit the app',
ToastAndroid.SHORT,
);
setRecentlyPressedHardwareBack(true);
// Toast shows for approx 2 seconds, so this is the valid period for exiting the app.
setTimeout(() => {
setRecentlyPressedHardwareBack(false);
}, 2000);
// Don't exit yet.
return true;
},
);
return () => backHandler.remove();
}, [recentlyPressedHardwareBack]);
You could use useRef for this.
const recentlyPressedHardwareBackRef = useRef(false);
useEffect(() => {
const backHandler = BackHandler.addEventListener(
'hardwareBackPress',
() => {
// Exit app if user pressed the button within last 2 seconds.
if (recentlyPressedHardwareBackRef.current) {
return false;
}
ToastAndroid.show(
'Press back again to exit the app',
ToastAndroid.SHORT,
);
recentlyPressedHardwareBackRef.current = true;
// Toast shows for approx 2 seconds, so this is the valid period for exiting the app.
setTimeout(() => {
recentlyPressedHardwareBackRef.current = false;
}, 2000);
// Don't exit yet.
return true;
},
);
return () => backHandler.remove();
}, [])