Merge pull request #948 from cmgustavo/bug/sheet-modal-on-background-01

Fix: dismiss SheetModal on background mode
bitpay · Oct 5, 2023 · 30d02c9 · 30d02c9
2 parents d397253 + e22ada3
commit 30d02c9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/components/modal/base/sheet/SheetModal.tsx b/src/components/modal/base/sheet/SheetModal.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {BlurContainer} from '../../../blur/Blur';
 import {SheetParams} from '../../../styled/Containers';
 import BaseModal from '../BaseModal';
+import {AppState, AppStateStatus} from 'react-native';
 
 interface Props extends SheetParams {
   isVisible: boolean;
   onBackdropPress: (props?: any) => void;
+  children?: any;
 }
 
 const SheetModal: React.FC<Props> = ({
@@ -14,10 +16,27 @@ const SheetModal: React.FC<Props> = ({
   onBackdropPress,
   placement,
 }) => {
+  const [isModalVisible, setModalVisible] = useState(isVisible);
+  useEffect(() => {
+    function onAppStateChange(status: AppStateStatus) {
+      if (isVisible && status === 'background') {
+        setModalVisible(false);
+        onBackdropPress();
+      }
+    }
+    setModalVisible(isVisible);
+
+    const subscriptionAppStateChange = AppState.addEventListener(
+      'change',
+      onAppStateChange,
+    );
+
+    return () => subscriptionAppStateChange.remove();
+  }, [isVisible]);
   return (
     <BaseModal
       id={'sheetModal'}
-      isVisible={isVisible}
+      isVisible={isModalVisible}
       backdropOpacity={0.4}
       backdropTransitionOutTiming={0}
       hideModalContentWhileAnimating={true}

diff --git a/src/components/modal/base/top-popup/TopPopupModal.tsx b/src/components/modal/base/top-popup/TopPopupModal.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 interface Props {
   isVisible: boolean;
   onBackdropPress: () => void;
+  children?: any;
 }
 
 const TopPopupModal: React.FC<Props> = ({