import React, { useEffect } from "react"; import { Text, View, StyleSheet, BackHandler, Alert } from "react-native"; import { useBackHandler } from "@react-native-community/hooks" const App = () => { // Callback function for back action const backActionHandler = () => { Alert.alert("Alert!", "Are you sure you want to exit app?", [ { text: "Cancel", onPress: () => null, style: "cancel" }, { text: "YES", onPress: () => BackHandler.exitApp() } ]); return true; }; // hook which handles event listeners under the hood useBackHandler(backActionHandler) 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;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter