From f770304de86c06bbf5f0e405a6bcdaa2fb90faa4 Mon Sep 17 00:00:00 2001
From: Amanda Bullington <35536439+albullington@users.noreply.github.com>
Date: Tue, 30 Jan 2024 16:54:58 -0800
Subject: [PATCH] Handle close & backdrop dismissal for Explore bottom sheet;
 closes #1075 (#1098)

---
 src/components/Explore/Explore.js             | 32 ++++++++++---------
 .../SharedComponents/Sheets/BottomSheet.js    |  8 ++++-
 .../Sheets/RadioButtonSheet.js                |  5 ---
 .../SharedComponents/Sheets/TextInputSheet.js |  5 ---
 .../SharedComponents/Sheets/TextSheet.js      |  5 ---
 .../SharedComponents/Sheets/WarningSheet.js   |  5 ---
 6 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/components/Explore/Explore.js b/src/components/Explore/Explore.js
index 5442d07ca..d65cdeaea 100644
--- a/src/components/Explore/Explore.js
+++ b/src/components/Explore/Explore.js
@@ -184,21 +184,23 @@ const Explore = ( {
             />
           </ViewWrapper>
         )}
-      {showExploreBottomSheet && (
-        <BottomSheet headerText={t( "EXPLORE" )}>
-          {Object.keys( exploreViewText ).map( view => (
-            <Button
-              text={exploreViewText[view]}
-              key={exploreViewText[view]}
-              className="mx-5 my-3"
-              onPress={() => {
-                changeExploreView( view );
-                setShowExploreBottomSheet( false );
-              }}
-            />
-          ) )}
-        </BottomSheet>
-      )}
+      <BottomSheet
+        handleClose={( ) => setShowExploreBottomSheet( false )}
+        headerText={t( "EXPLORE" )}
+        hidden={!showExploreBottomSheet}
+      >
+        {Object.keys( exploreViewText ).map( view => (
+          <Button
+            className="mx-5 my-3"
+            key={exploreViewText[view]}
+            onPress={() => {
+              changeExploreView( view );
+              setShowExploreBottomSheet( false );
+            }}
+            text={exploreViewText[view]}
+          />
+        ) )}
+      </BottomSheet>
     </>
   );
 };
diff --git a/src/components/SharedComponents/Sheets/BottomSheet.js b/src/components/SharedComponents/Sheets/BottomSheet.js
index 76dc6382d..44176281c 100644
--- a/src/components/SharedComponents/Sheets/BottomSheet.js
+++ b/src/components/SharedComponents/Sheets/BottomSheet.js
@@ -59,6 +59,12 @@ const StandardBottomSheet = ( {
   // eslint-disable-next-line
   const noHandle = ( ) => <></>;
 
+  const handleBackdropPress = useCallback( position => {
+    if ( handleClose && position === -1 ) {
+      handleClose( );
+    }
+  }, [handleClose] );
+
   const handleClosePress = useCallback( ( ) => {
     if ( handleClose ) {
       handleClose( );
@@ -100,7 +106,7 @@ const StandardBottomSheet = ( {
       style={viewStyles.shadow}
       handleComponent={noHandle}
       backdropComponent={renderBackdrop}
-      onChange={onChange}
+      onChange={onChange || handleBackdropPress}
     >
       <BottomSheetView onLayout={handleContentLayout}>
         <View className="items-center">
diff --git a/src/components/SharedComponents/Sheets/RadioButtonSheet.js b/src/components/SharedComponents/Sheets/RadioButtonSheet.js
index fed8f56c9..b26297e17 100644
--- a/src/components/SharedComponents/Sheets/RadioButtonSheet.js
+++ b/src/components/SharedComponents/Sheets/RadioButtonSheet.js
@@ -43,11 +43,6 @@ const RadioButtonSheet = ( {
     <BottomSheet
       handleClose={handleClose}
       headerText={headerText}
-      onChange={position => {
-        if ( position === -1 ) {
-          handleClose( );
-        }
-      }}
     >
       <View className="p-5">
         {Object.keys( radioValues ).map( radioRow => radioButtonRow( radioRow ) )}
diff --git a/src/components/SharedComponents/Sheets/TextInputSheet.js b/src/components/SharedComponents/Sheets/TextInputSheet.js
index 762fd5263..c9baf2489 100644
--- a/src/components/SharedComponents/Sheets/TextInputSheet.js
+++ b/src/components/SharedComponents/Sheets/TextInputSheet.js
@@ -53,11 +53,6 @@ const TextInputSheet = ( {
     <BottomSheet
       handleClose={handleClose}
       headerText={headerText}
-      onChange={position => {
-        if ( position === -1 ) {
-          handleClose();
-        }
-      }}
     >
       <View className="p-5">
         <BottomSheetTextInput
diff --git a/src/components/SharedComponents/Sheets/TextSheet.js b/src/components/SharedComponents/Sheets/TextSheet.js
index 13b791d98..9f032076a 100644
--- a/src/components/SharedComponents/Sheets/TextSheet.js
+++ b/src/components/SharedComponents/Sheets/TextSheet.js
@@ -31,11 +31,6 @@ const TextSheet = ( {
       handleClose={handleClose}
       headerText={headerText}
       hideCloseButton
-      onChange={position => {
-        if ( position === -1 ) {
-          handleClose( );
-        }
-      }}
     >
       <View className="p-5">
         <Body3 className="pb-5">
diff --git a/src/components/SharedComponents/Sheets/WarningSheet.js b/src/components/SharedComponents/Sheets/WarningSheet.js
index c035467a8..b33cce61b 100644
--- a/src/components/SharedComponents/Sheets/WarningSheet.js
+++ b/src/components/SharedComponents/Sheets/WarningSheet.js
@@ -37,11 +37,6 @@ const WarningSheet = ( {
     headerText={headerText}
     hidden={hidden}
     insideModal={insideModal}
-    onChange={position => {
-      if ( position === -1 ) {
-        handleClose( );
-      }
-    }}
   >
     <View className="items-center p-5">
       {text && <List2 className="mb-6">{text}</List2>}