android ui fixes

src/components/SelectSheet/index.tsx

@@ -9,10 +9,13 @@ import {
   FlatList,
   TextInput,
   Dimensions,
+  Platform
 } from 'react-native';
 import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import { Colors } from 'src/theme';
+import CloseSvg from 'assets/icons/close.svg';
+import CheckSvg from 'assets/icons/mark.svg';
 
 export interface SelectSheetProps<T extends Record<string, any>> {
   data: T[];
@@ -50,14 +53,11 @@ export const SelectSheet = <T extends Record<string, any>>({
   const sheetRef = useRef<ActionSheetRef>(null);
   const [query, setQuery] = useState('');
 
-  const selectedItem =
-    value != null ? data.find((item) => item[valueField] === value) : null;
+  const selectedItem = value != null ? data.find((item) => item[valueField] === value) : null;
 
   const filteredData =
     searchable && query.trim()
-      ? data.filter((item) =>
-        String(item[labelField]).toLowerCase().includes(query.toLowerCase())
-      )
+      ? data.filter((item) => String(item[labelField]).toLowerCase().includes(query.toLowerCase()))
       : data;
 
   const handleSelect = useCallback(
@@ -82,10 +82,7 @@ export const SelectSheet = <T extends Record<string, any>>({
         style={[styles.trigger, disabled && styles.triggerDisabled, style]}
       >
         <Text
-          style={[
-            styles.triggerText,
-            !selectedItem && styles.placeholderText,
-          ]}
+          style={[styles.triggerText, !selectedItem && styles.placeholderText]}
           numberOfLines={1}
         >
           {selectedItem ? String(selectedItem[labelField]) : placeholder}
@@ -95,7 +92,7 @@ export const SelectSheet = <T extends Record<string, any>>({
 
       <ActionSheet
         ref={sheetRef}
-        gestureEnabled
+        gestureEnabled={Platform.OS !== 'android'}
         closeOnTouchBackdrop
         snapPoints={[initialSnapPoint, 100]}
         initialSnapIndex={0}
@@ -104,7 +101,22 @@ export const SelectSheet = <T extends Record<string, any>>({
         onClose={() => setQuery('')}
       >
         <View style={styles.sheetContent}>
-          {!hideTitle && <Text style={styles.sheetTitle}>{placeholder}</Text>}
+          {Platform.OS === 'android' && (
+            <TouchableOpacity
+              onPress={() => sheetRef.current?.hide()}
+              style={styles.closeBtnAlone}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <CloseSvg />
+            </TouchableOpacity>
+          )}
+          {!hideTitle && (
+            <View style={styles.titleRow}>
+              <Text style={[styles.sheetTitle, Platform.OS === 'android' ? { paddingTop: 0 } : {}]}>
+                {placeholder}
+              </Text>
+            </View>
+          )}
 
           {searchable && (
             <View style={styles.searchWrapper}>
@@ -150,7 +162,7 @@ export const SelectSheet = <T extends Record<string, any>>({
                   </Text>
                   {isSelected && (
                     <View style={styles.checkmark}>
-                      <Text style={styles.checkmarkText}>✓</Text>
+                      <CheckSvg fill={Colors.DARK_BLUE} height={12} width={15} />
                     </View>
                   )}
                 </TouchableOpacity>
@@ -161,7 +173,7 @@ export const SelectSheet = <T extends Record<string, any>>({
       </ActionSheet>
     </>
   );
-}
+};
 
 const styles = StyleSheet.create({
   trigger: {
@@ -171,53 +183,43 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'space-between'
   },
   triggerDisabled: {
-    opacity: 0.5,
+    opacity: 0.5
   },
   triggerText: {
     flex: 1,
     fontSize: 15,
     color: Colors.DARK_BLUE,
-    marginRight: 6,
+    marginRight: 6
   },
   placeholderText: {
-    color: Colors.TEXT_GRAY,
+    color: Colors.TEXT_GRAY
   },
   sheetContent: {
     height: Dimensions.get('window').height * 0.9,
     backgroundColor: Colors.WHITE,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-    overflow: 'hidden',
+    overflow: 'hidden'
   },
   sheetContainer: {
     height: '90%',
     backgroundColor: Colors.WHITE,
     borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
+    borderTopRightRadius: 20
   },
   indicator: {
     width: 44,
     height: 5,
     borderRadius: 3,
     backgroundColor: Colors.LIGHT_GRAY,
-    marginTop: 8,
-  },
-  sheetTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: Colors.DARK_BLUE,
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    textAlign: 'center',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.DARK_LIGHT,
+    marginTop: 8
   },
   searchWrapper: {
     paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingVertical: 12
   },
   searchInput: {
     height: 44,
@@ -225,38 +227,62 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     paddingHorizontal: 16,
     fontSize: 16,
-    color: Colors.DARK_BLUE,
+    color: Colors.DARK_BLUE
   },
   list: {
-    flex: 1,
+    flex: 1
   },
   listContent: {
     paddingBottom: 40,
-    paddingTop: 8,
+    paddingTop: 8
   },
   option: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 24,
-    paddingVertical: 16,
+    paddingVertical: 16
   },
   optionText: {
     flex: 1,
     fontSize: 16,
-    color: Colors.DARK_BLUE,
+    color: Colors.DARK_BLUE
   },
   optionTextSelectedWeight: {
-    fontWeight: '700',
+    fontWeight: '700'
   },
   checkmark: {
-    marginLeft: 12,
+    marginLeft: 12
   },
   checkmarkText: {
     fontSize: 18,
     color: Colors.DARK_BLUE,
-    fontWeight: '700',
+    fontWeight: '700'
   },
   chevron: {
-    marginLeft: 2,
+    marginLeft: 2
   },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.DARK_LIGHT
+  },
+  sheetTitle: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '700',
+    color: Colors.DARK_BLUE,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    textAlign: 'center'
+  },
+  closeBtn: {
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  closeBtnAlone: {
+    alignSelf: 'flex-end',
+    paddingHorizontal: 16,
+    paddingTop: 16
+  }
 });

src/screens/InAppScreens/MapScreen/FilterModal/index.tsx

@@ -54,6 +54,7 @@ import { getFontSize } from 'src/utils';
 import InfoIcon from 'assets/icons/info-solid.svg';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import FriendsIcon from 'assets/icons/friend.svg';
+import CloseSvg from 'assets/icons/close.svg';
 
 export interface FilterModalRef {
   openFilter: (type: string) => void;
@@ -377,7 +378,7 @@ const FilterModal = forwardRef<
       }
     };
 
-    const handleCloseFilter = () => { };
+    const handleCloseFilter = () => {};
 
     const renderRegions = () => {
       return (
@@ -465,6 +466,15 @@ 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>
+          )}
           <View style={[styles.optionsContainer, { paddingHorizontal: 16 }]}>
             <View style={[styles.row, { gap: 8 }]}>
               <Switch
@@ -577,7 +587,10 @@ const FilterModal = forwardRef<
           </ScrollView>
 
           <View
-            style={{ marginTop: 'auto', marginBottom: insets.bottom || 24, paddingHorizontal: 16 }}
+            style={[
+              { marginTop: 'auto', paddingHorizontal: 16 },
+              Platform.OS === 'android' ? {} : { marginBottom: insets.bottom || 24 }
+            ]}
           >
             <Button
               children="Reset"
@@ -961,7 +974,7 @@ const FilterModal = forwardRef<
             message={
               'This feature is available to Premium users. Premium account settings can be managed on our website.'
             }
-            action={() => { }}
+            action={() => {}}
             onClose={() => setPremiumModalVisible(false)}
             title={'Premium Feature'}
           />
@@ -1022,12 +1035,12 @@ const FilterModal = forwardRef<
         key={isSeriesFilter ? 'series-sheet' : 'default-sheet'}
         ref={bottomSheetRef}
         snapPoints={sheetSnapPoints}
-        gestureEnabled
+        gestureEnabled={isSeriesFilter && Platform.OS === 'android' ? false : true}
         closeOnTouchBackdrop
         defaultOverlayOpacity={0.2}
         onClose={handleCloseFilter}
         containerStyle={[styles.sheetBackground, isSeriesFilter ? { height: '100%' } : {}]}
-        safeAreaInsets={{ bottom: insets.bottom, top: insets.top, left: 0, right: 0 }}
+        safeAreaInsets={{ bottom: insets.bottom || 24, top: insets.top, left: 0, right: 0 }}
       >
         <View
           style={[

src/screens/InAppScreens/MapScreen/FilterModal/styles.tsx

@@ -214,5 +214,10 @@ export const styles = StyleSheet.create({
   sheetHandle: {
     backgroundColor: '#D1D1D6',
     width: 40
+  },
+  seriesCloseBtn: {
+    alignSelf: 'flex-end',
+    paddingHorizontal: 16,
+    paddingVertical: 4
   }
 });

src/screens/InAppScreens/TravellersScreen/Components/FilterModal.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import { TouchableOpacity, View, Animated, Easing } from 'react-native';
+import { TouchableOpacity, View, Animated, Easing, Platform } from 'react-native';
 
 import { ModalStyles } from './styles';
 import { Colors } from '../../../../theme';
@@ -119,6 +119,7 @@ export const FilterModal = forwardRef<FilterModalRef, ModalProps>(({
               onChange={(item) => setFilterCountry(item)}
               searchable={true}
               searchPlaceholder="Search country..."
+              initialSnapPoint={Platform.OS === 'android' ? 100 : 70}
             />
           )}
 
@@ -131,6 +132,7 @@ export const FilterModal = forwardRef<FilterModalRef, ModalProps>(({
               value={filterRanking?.value ?? null}
               placeholder="Ranking"
               onChange={(item) => setFilterRanking(item)}
+              initialSnapPoint={Platform.OS === 'android' ? 100 : 70}
             />
             <SelectSheet
               style={ModalStyles.dropdown}
@@ -141,6 +143,7 @@ export const FilterModal = forwardRef<FilterModalRef, ModalProps>(({
               value={filterAge?.value ?? null}
               placeholder="Age"
               onChange={(item) => setFilterAge(item)}
+              initialSnapPoint={Platform.OS === 'android' ? 100 : 70}
             />
           </View>
           <View style={ModalStyles.buttonsWrapper}>