refactor: ✨ update bottomsheet by BackButton

#44
bitsongofficial · Jul 8, 2022 · bb6219b · bb6219b
1 parent b787feb
commit bb6219b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/components/moleculs/BottomSheetModal.tsx b/components/moleculs/BottomSheetModal.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef, useCallback, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
+import { BackHandler, StyleSheet, View } from "react-native";
 import { observer } from "mobx-react-lite";
 import {
   BottomSheetModalMethods,
@@ -23,6 +23,8 @@ export const BottomSheetModal = observer(
     const theme = useTheme();
     const [isOpen, handleAnimate] = useBackdrop(props.onAnimate);
 
+    useBottomSheetBackButton(isOpen);
+
     return (
       <>
         {isOpen && <Backdrop />}
@@ -59,6 +61,8 @@ export const BottomSheet = observer(
 
     const [isOpen, handleAnimate] = useBackdrop(props.onAnimate);
 
+    useBottomSheetBackButton(isOpen);
+
     return (
       <>
         {isOpen && <Backdrop />}
@@ -103,6 +107,18 @@ function useBackdrop(onAnimate: BottomSheetProps["onAnimate"]) {
   return [isOpen, handleAnimate] as const;
 }
 
+function useBottomSheetBackButton(isOpen: boolean | undefined) {
+  useEffect(() => {
+    if (isOpen) {
+      const handler = BackHandler.addEventListener(
+        "hardwareBackPress",
+        () => true
+      );
+      return () => handler.remove();
+    }
+  }, [isOpen]);
+}
+
 const styles = StyleSheet.create({
   background: {
     borderTopRightRadius: 30,

diff --git a/screens/Profile/hooks/useBottomSheetBackButton.ts b/screens/Profile/hooks/useBottomSheetBackButton.ts