diff --git a/src/frontend/screens/Settings/MapSettings/BackgroundMapInfo.tsx b/src/frontend/screens/Settings/MapSettings/BackgroundMapInfo.tsx index c26c69905..28bf1353c 100644 --- 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} /> ); diff --git a/src/frontend/screens/Settings/MapSettings/DeleteMapBottomSheet.tsx b/src/frontend/screens/Settings/MapSettings/DeleteMapBottomSheet.tsx index b7c4b881b..a6e70d226 100644 --- 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 ( - + { const initiallyOpenedRef = React.useRef(false); const sheetRef = React.useRef(null); - const isOpen = React.useRef(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; }