ソースを参照

close btn for bottom sheets

Viktoriia 3 週間 前
コミット
cc0d9270fd

+ 7 - 9
src/components/SelectSheet/index.tsx

@@ -101,15 +101,13 @@ export const SelectSheet = <T extends Record<string, any>>({
         onClose={() => setQuery('')}
       >
         <View style={styles.sheetContent}>
-          {Platform.OS === 'android' && (
-            <TouchableOpacity
-              onPress={() => sheetRef.current?.hide()}
-              style={styles.closeBtnAlone}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <CloseSvg />
-            </TouchableOpacity>
-          )}
+          <TouchableOpacity
+            onPress={() => sheetRef.current?.hide()}
+            style={[styles.closeBtnAlone, Platform.OS === 'ios' ? { paddingTop: 6 } : {}]}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <CloseSvg width={15} height={15} />
+          </TouchableOpacity>
           {!hideTitle && (
             <View style={styles.titleRow}>
               <Text style={[styles.sheetTitle, Platform.OS === 'android' ? { paddingTop: 0 } : {}]}>

+ 25 - 12
src/screens/InAppScreens/MapScreen/FilterModal/index.tsx

@@ -383,6 +383,13 @@ const FilterModal = forwardRef<
     const renderRegions = () => {
       return (
         <View style={{ minHeight: 200, justifyContent: 'space-between' }}>
+          <TouchableOpacity
+            onPress={() => bottomSheetRef.current?.hide()}
+            style={[styles.regionsCloseBtn]}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <CloseSvg width={15} height={15} />
+          </TouchableOpacity>
           <View style={styles.optionsContainer}>
             <View style={[styles.rowWrapper, {}]}>
               <View style={[styles.dropdownWrapper, {}]}>
@@ -397,7 +404,7 @@ const FilterModal = forwardRef<
                     setTilesType(item);
                   }}
                   hideTitle={true}
-                  initialSnapPoint={45}
+                  initialSnapPoint={Platform.OS === 'android' ? 55 : 45}
                 />
               </View>
             </View>
@@ -416,7 +423,7 @@ const FilterModal = forwardRef<
                       setSelectedVisible(item);
                     }}
                     hideTitle={true}
-                    initialSnapPoint={35}
+                    initialSnapPoint={Platform.OS === 'android' ? 45 : 35}
                   />
                 </View>
                 <View style={styles.dropdownWrapper}>
@@ -431,6 +438,7 @@ const FilterModal = forwardRef<
                       setSelectedYear(item);
                     }}
                     hideTitle={true}
+                    initialSnapPoint={Platform.OS === 'android' ? 100 : 70}
                   />
                 </View>
               </View>
@@ -466,15 +474,13 @@ const FilterModal = forwardRef<
 
       return (
         <View style={[styles.seriesSheetContainer]}>
-          {Platform.OS === 'android' && (
-            <TouchableOpacity
-              onPress={() => bottomSheetRef.current?.hide()}
-              style={styles.seriesCloseBtn}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <CloseSvg />
-            </TouchableOpacity>
-          )}
+          <TouchableOpacity
+            onPress={() => bottomSheetRef.current?.hide()}
+            style={styles.seriesCloseBtn}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <CloseSvg width={15} height={15} />
+          </TouchableOpacity>
           <View style={[styles.optionsContainer, { paddingHorizontal: 16 }]}>
             <View style={[styles.row, { gap: 8 }]}>
               <Switch
@@ -737,6 +743,13 @@ const FilterModal = forwardRef<
     const renderNomads = () => {
       return (
         <View style={[styles.sceneContainer, { justifyContent: 'space-between' }]}>
+          <TouchableOpacity
+            onPress={() => bottomSheetRef.current?.hide()}
+            style={[styles.regionsCloseBtn]}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <CloseSvg width={15} height={15} />
+          </TouchableOpacity>
           <View style={{ marginBottom: 16 }}>
             <View style={styles.textContainer}>
               <Text style={styles.text}>The location is shared with 1 km radius precision.</Text>
@@ -1045,7 +1058,7 @@ const FilterModal = forwardRef<
         <View
           style={[
             {
-              paddingTop: 12,
+              paddingTop: Platform.OS === 'android' ? 12 : 0,
               height: isSeriesFilter ? windowHeight - insets.top : undefined
             },
             isFilterVisible === 'series' ? {} : { paddingHorizontal: 16 }

+ 5 - 0
src/screens/InAppScreens/MapScreen/FilterModal/styles.tsx

@@ -219,5 +219,10 @@ export const styles = StyleSheet.create({
     alignSelf: 'flex-end',
     paddingHorizontal: 16,
     paddingVertical: 4
+  },
+  regionsCloseBtn: {
+    alignSelf: 'flex-end',
+    paddingBottom: 18,
+    paddingTop: 4
   }
 });