The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
If one subscription returns true, then subscriptions registered earlier will not be called.If no subscription returns true or none are registered, it programmatically invokes the default back button functionality to exit the app.Warning for modal users: If your app shows an opened Modal, BackHandler will not publish any events (see Modal docs ).
# Copy BackHandler . addEventListener ( 'hardwareBackPress' , function ( ) {
if ( ! this . onMainScreen ( ) ) {
this . goBack ( ) ;
return true ;
}
return false ;
} ) ;
# The following example implements a scenario where you confirm if the user wants to exit the app:
Function Component Example Class Component Example
import React, { useEffect } from "react" ;
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native" ;
const App = () =>() =>const backAction = () =>"Hold on!" , "Are you sure you want to go back?" , [
{
text : "Cancel" ,
onPress : () =>null ,
style : "cancel"
},
{ text : "YES" , onPress : () =>return true ;
};
const backHandler = BackHandler.addEventListener(
"hardwareBackPress" ,
backAction
);
return () =>return (
<View style ={styles.container} >
<Text style ={styles.text} > Click Back button!</Text >
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "center" ,
justifyContent : "center"
},
text : {
fontSize : 18 ,
fontWeight : "bold"
}
});
export default App;
import React, { Component } from "react" ;
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native" ;
class App extends Component () =>"Hold on!" , "Are you sure you want to go back?" , [
{
text : "Cancel" ,
onPress : () =>null ,
style : "cancel"
},
{ text : "YES" , onPress : () =>return true ;
};
componentDidMount() {
this .backHandler = BackHandler.addEventListener(
"hardwareBackPress" ,
this .backAction
);
}
componentWillUnmount() {
this .backHandler.remove();
}
render() {
return (
<View style ={styles.container} >
<Text style ={styles.text} > Click Back button!</Text >
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "center" ,
justifyContent : "center"
},
text : {
fontSize : 18 ,
fontWeight : "bold"
}
});
export default App;
BackHandler.addEventListener creates an event listener & returns a NativeEventSubscription object which should be cleared using NativeEventSubscription.remove method.
Additionally BackHandler.removeEventListener can also be used to clear the event listener. Ensure the callback has the reference to the same function used in the addEventListener call as shown the following example ï¹£
Function Component Example Class Component Example
import React, { useEffect } from "react" ;
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native" ;
const App = () =>const backAction = () =>"Hold on!" , "Are you sure you want to go back?" , [
{
text : "Cancel" ,
onPress : () =>null ,
style : "cancel"
},
{ text : "YES" , onPress : () =>return true ;
};
useEffect(() =>"hardwareBackPress" , backAction);
return () =>"hardwareBackPress" , backAction);
}, []);
return (
<View style ={styles.container} >
<Text style ={styles.text} > Click Back button!</Text >
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "center" ,
justifyContent : "center"
},
text : {
fontSize : 18 ,
fontWeight : "bold"
}
});
export default App;
import React, { Component } from "react" ;
import { Text, View, StyleSheet, BackHandler, Alert } from "react-native" ;
class App extends Component () =>"Hold on!" , "Are you sure you want to go back?" , [
{
text : "Cancel" ,
onPress : () =>null ,
style : "cancel"
},
{ text : "YES" , onPress : () =>return true ;
};
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress" , this .backAction);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress" , this .backAction);
}
render() {
return (
<View style ={styles.container} >
<Text style ={styles.text} > Click Back button!</Text >
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "center" ,
justifyContent : "center"
},
text : {
fontSize : 18 ,
fontWeight : "bold"
}
});
export default App;
# If you are using React Navigation to navigate across different screens, you can follow their guide on Custom Android back button behaviour
# React Native Hooks has a nice useBackHandler hook which will simplify the process of setting up event listeners.
# # addEventListener()# Copy static addEventListener ( eventName , handler )
exitApp()# removeEventListener()# Copy static removeEventListener ( eventName , handler )