chore: fix back button on map info screen

digidem · Feb 20, 2023 · 23c9ac0 · 23c9ac0
1 parent d65886c
commit 23c9ac0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/frontend/screens/Settings/MapSettings/BackgroundMapInfo.tsx b/src/frontend/screens/Settings/MapSettings/BackgroundMapInfo.tsx
@@ -136,7 +136,7 @@ export const BackgroundMapInfo = ({
   const { formatMessage: t } = useIntl();
   const { bytesStored, id, styleUrl, name } = route.params;
 
-  const { closeSheet, openSheet, sheetRef } = useBottomSheetModal({
+  const { closeSheet, openSheet, sheetRef, isOpen } = useBottomSheetModal({
     openOnMount: false,
   });
 
@@ -204,6 +204,8 @@ export const BackgroundMapInfo = ({
         mapName={name}
         mapId={id}
         closeSheet={closeSheet}
+        // If open, hardware backpress returns true, which disables the back button and vice versa
+        onHardwareBackPress={() => isOpen}
       />
     </View>
   );

diff --git a/src/frontend/screens/Settings/MapSettings/DeleteMapBottomSheet.tsx b/src/frontend/screens/Settings/MapSettings/DeleteMapBottomSheet.tsx
@@ -36,12 +36,13 @@ interface DeleteMapBottomSheetProps {
   mapName: string;
   mapId: string;
   closeSheet: () => void;
+  onHardwareBackPress: () => boolean;
 }
 
 export const DeleteMapBottomSheet = React.forwardRef<
   BottomSheetModalMethods,
   DeleteMapBottomSheetProps
->(({ mapName, closeSheet, mapId }, sheetRef) => {
+>(({ mapName, closeSheet, mapId, onHardwareBackPress }, sheetRef) => {
   const { navigate } = useNavigationFromRoot();
   const { formatMessage: t } = useIntl();
   const { selectedStyleId, setSelectedStyleId } = useMapStyles();
@@ -67,7 +68,11 @@ export const DeleteMapBottomSheet = React.forwardRef<
   }
 
   return (
-    <BottomSheetModal ref={sheetRef} onDismiss={closeSheet}>
+    <BottomSheetModal
+      ref={sheetRef}
+      onDismiss={closeSheet}
+      onHardwareBackPress={onHardwareBackPress}
+    >
       <BottomSheetContent
         descriptionStyle={{ fontSize: 16 }}
         title={

diff --git a/src/frontend/sharedComponents/BottomSheetModal/index.tsx b/src/frontend/sharedComponents/BottomSheetModal/index.tsx
@@ -23,19 +23,19 @@ export const useBottomSheetModal = ({
 }) => {
   const initiallyOpenedRef = React.useRef(false);
   const sheetRef = React.useRef<RNBottomSheetModal>(null);
-  const isOpen = React.useRef<boolean>(false);
+  const [isOpen, setIsOpen] = React.useState(false);
 
   const closeSheet = React.useCallback(() => {
     if (sheetRef.current) {
       sheetRef.current.dismiss();
-      isOpen.current = false;
+      setIsOpen(false);
     }
   }, []);
 
   const openSheet = React.useCallback(() => {
     if (sheetRef.current) {
       sheetRef.current.present();
-      isOpen.current = true;
+      setIsOpen(true);
     }
   }, []);
 
@@ -46,14 +46,17 @@ export const useBottomSheetModal = ({
     }
   }, [openOnMount, openSheet]);
 
-  return { sheetRef, closeSheet, openSheet, isOpen: isOpen.current };
+  return { sheetRef, closeSheet, openSheet, isOpen };
 };
 
-const useBackPressHandler = (onHardwareBackPress?: () => void) => {
+const useBackPressHandler = (onHardwareBackPress?: () => void | boolean) => {
   React.useEffect(() => {
     const onBack = () => {
       if (onHardwareBackPress) {
-        onHardwareBackPress();
+        const backPress = onHardwareBackPress();
+        if (typeof backPress === "boolean") {
+          return backPress;
+        }
       }
 
       // We don't allow the back press to navigate/dismiss this modal by default
@@ -95,7 +98,7 @@ const useSnapPointsCalculator = () => {
 
 interface Props extends React.PropsWithChildren<{}> {
   onDismiss: () => void;
-  onHardwareBackPress?: () => void;
+  onHardwareBackPress?: () => void | boolean;
   snapPoints?: (string | number)[];
   disableBackrop?: boolean;
 }