Handle close & backdrop dismissal for Explore bottom sheet; closes #1075 (#1098)

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>
     </>
   );
 };

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">

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 ) )}

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

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">

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>}