Prevent back navigation with back button on Android

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@react-native-community/datetimepicker": "3.2.0",
+    "@react-native-community/hooks": "^2.8.1",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.9.4",

screens/BasicApi.js

@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text } from "react-native";
 import firebase from "../database/firebaseDB";
 import moment from "moment";
+import { Alert, BackHandler } from "react-native";
 
 // Get user's coins
 export function getCoins(uid, setCoins) {
@@ -104,3 +105,14 @@ export function renderAllDates(dates) {
     <Text></Text>;
   }
 }
+
+export const backActionHandler = () => {
+  Alert.alert("Alert!", "Are you sure you want to exit app?", [
+    {
+      text: "Cancel",
+      onPress: () => null,
+    },
+    { text: "YES", onPress: () => BackHandler.exitApp() },
+  ]);
+  return true;
+};

screens/borrow-screens/BorrowSelectionScreen.js

@@ -16,6 +16,8 @@ import firebase from "../../database/firebaseDB";
 import { setStallDetails, setQuotas, getBorrowedNum } from "./BorrowApi";
 import { UserContext } from "../../assets/UserContext";
 import Constants from "expo-constants";
+import { useBackHandler } from "@react-native-community/hooks";
+import { backActionHandler } from "../BasicApi";
 
 export default function BorrowSelectionScreen({ navigation, route }) {
   // Stall name from scanning QR code
@@ -41,6 +43,9 @@ export default function BorrowSelectionScreen({ navigation, route }) {
   const [numCups, setCupNum] = useState(0);
   const [numContainers, setContainerNum] = useState(0);
 
+  // Prevent back button action on Android
+  useBackHandler(backActionHandler);
+
   // Set up stall details / quotas on intial render
   useEffect(() => {
     setQuotas(setCupQuota, setContainerQuota);

screens/borrow-screens/BorrowSuccessfulScreen.js

@@ -6,11 +6,17 @@ import { globalStyles } from "../../assets/globalStyles";
 import FooterText from "../../components/FooterText";
 import { UserContext } from "../../assets/UserContext";
 import { uploadBorrowData } from "./BorrowApi";
+import { useBackHandler } from "@react-native-community/hooks";
+import { backActionHandler } from "../BasicApi";
 
 export default function BorrowSuccessfulScreen({ route, navigation }) {
   const userData = useContext(UserContext);
   const { numCups, numContainers } = route.params;
   const [hasError, setError] = useState(false);
+
+  // Prevent back button action on Android
+  useBackHandler(backActionHandler);
+
   // console.log(userData.id);
   useEffect(() => {
     uploadBorrowData(userData.id, numCups, numContainers, setError);

screens/borrow-screens/BorrowUnsuccessfulScreen.js

@@ -3,8 +3,12 @@ import { StyleSheet, Text, ScrollView, Image, Dimensions } from "react-native";
 import UnsuccessBox from "../../components/UnsuccessBox";
 import colors from "../../assets/colors";
 import { globalStyles } from "../../assets/globalStyles";
+import { useBackHandler } from "@react-native-community/hooks";
+import { backActionHandler } from "../BasicApi";
 
 export default function BorrowUnsuccessfulScreen() {
+  // Prevent back button action on Android
+  useBackHandler(backActionHandler);
 
   return (
     <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
@@ -21,4 +25,4 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.white,
   },
-});
+});

screens/byo-screens/BYOScreen.js

@@ -96,17 +96,17 @@ export default function BYOScreen({ navigation }) {
       >
         <View style={styles.box}>
           {/* <TouchableOpacity
-          onPress={() => navigation.navigate("BYO Unsuccessful Screen")}
-          style={styles.imagePlaceholder}
-        >
-          <Text>(Unsuccessful Screen)</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => navigation.navigate("BYO Selection Screen")}
-          style={styles.imagePlaceholder}
-        >
-          <Text>(Selection screen)</Text>
-        </TouchableOpacity>  */}
+            onPress={() => navigation.navigate("BYO Unsuccessful Screen")}
+            style={styles.imagePlaceholder}
+          >
+            <Text>(Unsuccessful Screen)</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => navigation.navigate("BYO Selection Screen")}
+            style={styles.imagePlaceholder}
+          >
+            <Text>(Selection screen)</Text>
+          </TouchableOpacity> */}
           <Text style={styles.text}>Scan the QR code!</Text>
           <BarCodeScanner
             onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}

screens/byo-screens/BYOSelectionScreen.js

@@ -14,6 +14,8 @@ import SelectionComponent from "../../components/SelectionComponent";
 import FooterText from "../../components/FooterText";
 import Constants from "expo-constants";
 import { setStallDetails, setQuotas } from "../borrow-screens/BorrowApi";
+import { useBackHandler } from "@react-native-community/hooks";
+import { backActionHandler } from "../BasicApi";
 
 export default function BYOSelectionScreen({ navigation, route }) {
   //Based on this store name, grab data from firebase
@@ -36,6 +38,9 @@ export default function BYOSelectionScreen({ navigation, route }) {
   const [numCups, setCupNum] = useState(0);
   const [numContainers, setContainerNum] = useState(0);
 
+  // Prevent back button action on Android
+  useBackHandler(backActionHandler);
+
   useEffect(() => {
     setQuotas(setCupQuota, setContainerQuota);
     setStallDetails(

screens/byo-screens/BYOSuccessScreen.js

@@ -6,6 +6,8 @@ import { globalStyles } from "../../assets/globalStyles";
 import FooterText from "../../components/FooterText";
 import { uploadByoData, updateCoins } from "./BYOApi";
 import { UserContext } from "../../assets/UserContext";
+import { useBackHandler } from "@react-native-community/hooks";
+import { backActionHandler } from "../BasicApi";
 
 export default function BYOSuccessScreen({ route }) {
   const { numCups, numContainers } = route.params;
@@ -16,6 +18,9 @@ export default function BYOSuccessScreen({ route }) {
   // Can change the value of coins earned accordingly
   const coinsEarned = numCups + numContainers;
 
+  // Prevent back button action on Android
+  useBackHandler(backActionHandler);
+
   useEffect(() => {
     uploadByoData(uid, numCups, numContainers, setError);
     updateCoins(uid, coinsEarned);

screens/byo-screens/BYOUnsuccessfulScree.js

@@ -1,20 +1,32 @@
 import React from "react";
-import { StyleSheet, Text, View, ScrollView, Image, Dimensions } from "react-native";
+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  Image,
+  Dimensions,
+} from "react-native";
 import UnsuccessBox from "../../components/UnsuccessBox";
 import colors from "../../assets/colors";
 import { globalStyles } from "../../assets/globalStyles";
+import { useBackHandler } from "@react-native-community/hooks";
+import { backActionHandler } from "../BasicApi";
 
 export default function BYOUnsuccessfulScreen() {
+  // Prevent back button action on Android
+  useBackHandler(backActionHandler);
+
   return (
     <ScrollView
       style={{ backgroundColor: colors.white }}
       showsVerticalScrollIndicator={false}
     >
       <View style={styles.container}>
-      <Image
-        source={require("../../assets/AppImages/byoHeader.png")}
-        style={{ width: Dimensions.get("window").width, marginBottom: 50 }}
-      />
+        <Image
+          source={require("../../assets/AppImages/byoHeader.png")}
+          style={{ width: Dimensions.get("window").width, marginBottom: 50 }}
+        />
         <UnsuccessBox />
       </View>
     </ScrollView>