Fix AutocompleteDropdown on iOS

aelassas · Aug 27, 2024 · 0c0f94e · 0c0f94e
1 parent 90fd48a
commit 0c0f94e
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 90 deletions.
diff --git a/mobile/components/AutocompleteDropdown-v4/AutocompleteDropdownContext.tsx b/mobile/components/AutocompleteDropdown-v4/AutocompleteDropdownContext.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react'
 import type { SetStateAction, Dispatch, FC, ReactElement, MutableRefObject } from 'react'
 import type { LayoutChangeEvent, ViewProps } from 'react-native'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import type { IAutocompleteDropdownRef } from './types'
 
 export interface IAutocompleteDropdownContext {
@@ -55,15 +55,15 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
     if (dropdownHeight && direction === 'up') {
       setContentStyles({
         // top: inputMeasurements.y - dropdownHeight - 5 - headerOffset,
-        top: inputMeasurements.y - dropdownHeight - 45 - headerOffset,
+        top: inputMeasurements.y - dropdownHeight - Platform.select({ android: 45, ios: 70 })! - headerOffset,
         left: inputMeasurements.x,
         width: inputMeasurements.width,
       })
       setOpacity(1)
     } else if (direction === 'down') {
       setContentStyles({
         // top: inputMeasurements.y + inputMeasurements.height + 10 + headerOffset,
-        top: inputMeasurements.y + inputMeasurements.height - 30 + headerOffset,
+        top: inputMeasurements.y + inputMeasurements.height - Platform.select({ android: 30, ios: 50 })! + headerOffset,
         left: inputMeasurements.x,
         width: inputMeasurements.width,
       })
@@ -105,7 +105,7 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
                 (JSON.stringify(prev) === JSON.stringify({ x, y, width, height }) ? prev : { x, y, width, height }),)
             })
         })
-      }, 16)
+      }, 1)
     } else {
       clearInterval(positionTrackingIntervalRef.current)
     }

diff --git a/mobile/components/AutocompleteDropdown-v4/Dropdown.tsx b/mobile/components/AutocompleteDropdown-v4/Dropdown.tsx
@@ -41,7 +41,8 @@ export const Dropdown = memo((props: DropdownProps) => {
         ...(rest.suggestionsListContainerStyle as object),
       }}>
       <FlatList
-        keyboardDismissMode="on-drag"
+        // keyboardDismissMode="on-drag"
+        keyboardDismissMode="none"
         keyboardShouldPersistTaps="handled"
         nestedScrollEnabled={true}
         data={dataSet}

diff --git a/mobile/components/Layout.tsx b/mobile/components/Layout.tsx
@@ -3,12 +3,13 @@ import { StyleSheet, View, Text } from 'react-native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { RouteProp } from '@react-navigation/native'
 
+import * as bookcarsTypes from ':bookcars-types'
 import * as UserService from '../services/UserService'
 import Button from './Button'
 import i18n from '../lang/i18n'
 import * as helper from '../common/helper'
 import Header from './Header'
-import * as bookcarsTypes from ':bookcars-types'
+import { AutocompleteDropdownContextProvider } from './AutocompleteDropdown-v4'
 
 interface LayoutProps {
   navigation: NativeStackNavigationProp<StackParams, keyof StackParams>
@@ -135,7 +136,7 @@ const Layout = ({
       <Header title={title} hideTitle={hideTitle} loggedIn={loggedIn} reload={reload} _avatar={avatar} />
       {(!loading
         && ((!user && !strict) || (user && user.verified) ? (
-          children
+          <AutocompleteDropdownContextProvider>{children}</AutocompleteDropdownContextProvider>
         ) : (
           <View style={styles.validate}>
             <Text style={styles.validateText}>{i18n.t('VALIDATE_EMAIL')}</Text>
@@ -148,7 +149,7 @@ const Layout = ({
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#F5F5F5',
   },
   validate: {
     marginTop: 15,

diff --git a/mobile/screens/CarsScreen.tsx b/mobile/screens/CarsScreen.tsx
@@ -24,7 +24,6 @@ import CarSpecsFilter from '../components/CarSpecsFilter'
 import SearchFormFilter from '../components/SearchFormFilter'
 import CarRatingFilter from '../components/CarRatingFilter'
 import Indicator from '../components/Indicator'
-import { AutocompleteDropdownContextProvider } from '../components/AutocompleteDropdown-v4'
 
 const CarsScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, 'Cars'>) => {
   const isFocused = useIsFocused()
@@ -168,74 +167,72 @@ const CarsScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, '
     <Layout style={styles.master} onLoad={onLoad} reload={reload} navigation={navigation} route={route}>
       {!visible && <Indicator style={{ marginVertical: 10 }} />}
       {visible && pickupLocation && dropoffLocation && (
-        <AutocompleteDropdownContextProvider>
-          <CarList
-            navigation={navigation}
-            suppliers={supplierIds}
-            rating={rating}
-            ranges={ranges}
-            multimedia={multimedia}
-            seats={seats}
-            carSpecs={carSpecs}
-            carType={carType}
-            gearbox={gearbox}
-            mileage={mileage}
-            fuelPolicy={fuelPolicy}
-            deposit={deposit}
-            pickupLocation={route.params.pickupLocation}
-            dropOffLocation={route.params.dropOffLocation}
-            from={new Date(route.params.from)}
-            to={new Date(route.params.to)}
-            onLoad={(data) => {
-              if (data) {
-                setCarCount(data?.rowCount)
-              }
-            }}
-            route="Cars"
-            header={(
-              <View>
-                <SearchFormFilter
-                  navigation={navigation}
-                  style={styles.filter}
-                  visible={loaded}
-                  pickupLocation={pickupLocation._id}
-                  dropOffLocation={dropoffLocation._id}
-                  pickupLocationText={pickupLocation.name}
-                  dropOffLocationText={dropoffLocation.name}
-                  fromDate={new Date(route.params.from)}
-                  fromTime={new Date(route.params.from)}
-                  toDate={new Date(route.params.to)}
-                  toTime={new Date(route.params.to)}
-                />
+        <CarList
+          navigation={navigation}
+          suppliers={supplierIds}
+          rating={rating}
+          ranges={ranges}
+          multimedia={multimedia}
+          seats={seats}
+          carSpecs={carSpecs}
+          carType={carType}
+          gearbox={gearbox}
+          mileage={mileage}
+          fuelPolicy={fuelPolicy}
+          deposit={deposit}
+          pickupLocation={route.params.pickupLocation}
+          dropOffLocation={route.params.dropOffLocation}
+          from={new Date(route.params.from)}
+          to={new Date(route.params.to)}
+          onLoad={(data) => {
+            if (data) {
+              setCarCount(data?.rowCount)
+            }
+          }}
+          route="Cars"
+          header={(
+            <View>
+              <SearchFormFilter
+                navigation={navigation}
+                style={styles.filter}
+                visible={loaded}
+                pickupLocation={pickupLocation._id}
+                dropOffLocation={dropoffLocation._id}
+                pickupLocationText={pickupLocation.name}
+                dropOffLocationText={dropoffLocation.name}
+                fromDate={new Date(route.params.from)}
+                fromTime={new Date(route.params.from)}
+                toDate={new Date(route.params.to)}
+                toTime={new Date(route.params.to)}
+              />
 
-                <SupplierFilter style={styles.filter} visible={loaded} suppliers={suppliers} onChange={onChangeSuppliers} />
-                <CarRatingFilter style={styles.filter} visible={loaded} onChange={onChangeCarRating} />
-                <CarRangeFilter style={styles.filter} visible={loaded} onChange={onChangeCarRange} />
-                <CarMultimediaFilter style={styles.filter} visible={loaded} onChange={onChangeCarMultimedia} />
-                <CarSeatsFilter style={styles.filter} visible={loaded} onChange={onChangeCarSeats} />
-                <CarSpecsFilter style={styles.filter} visible={loaded} onChange={onChangeCarSpecs} />
-                <CarTypeFilter style={styles.filter} visible={loaded} onChange={onChangeFuel} />
-                <GearboxFilter style={styles.filter} visible={loaded} onChange={onChangeGearbox} />
-                <MileageFilter style={styles.filter} visible={loaded} onChange={onChangeMileage} />
-                <FuelPolicyFilter style={styles.filter} visible={loaded} onChange={onChangeFuelPolicy} />
-                <DepositFilter style={styles.filter} visible={loaded} onChange={onChangeDeposit} />
+              <SupplierFilter style={styles.filter} visible={loaded} suppliers={suppliers} onChange={onChangeSuppliers} />
+              <CarRatingFilter style={styles.filter} visible={loaded} onChange={onChangeCarRating} />
+              <CarRangeFilter style={styles.filter} visible={loaded} onChange={onChangeCarRange} />
+              <CarMultimediaFilter style={styles.filter} visible={loaded} onChange={onChangeCarMultimedia} />
+              <CarSeatsFilter style={styles.filter} visible={loaded} onChange={onChangeCarSeats} />
+              <CarSpecsFilter style={styles.filter} visible={loaded} onChange={onChangeCarSpecs} />
+              <CarTypeFilter style={styles.filter} visible={loaded} onChange={onChangeFuel} />
+              <GearboxFilter style={styles.filter} visible={loaded} onChange={onChangeGearbox} />
+              <MileageFilter style={styles.filter} visible={loaded} onChange={onChangeMileage} />
+              <FuelPolicyFilter style={styles.filter} visible={loaded} onChange={onChangeFuelPolicy} />
+              <DepositFilter style={styles.filter} visible={loaded} onChange={onChangeDeposit} />
 
-                {loaded && (
-                  <View style={styles.title}>
-                    <View style={styles.bookcars}>
-                      <Text style={styles.titleText}>{i18n.t('SEARCH_TITLE_1')}</Text>
-                      <Text style={styles.titleBookCars}>{i18n.t('BOOKCARS')}</Text>
-                      <Text style={styles.titleText}>{i18n.t('SEARCH_TITLE_2')}</Text>
-                    </View>
-                    {carCount > 0 && (
-                      <Text style={styles.carCount}>{`(${carCount} ${carCount === 1 ? i18n.t('CAR_AVAILABLE') : i18n.t('CARS_AVAILABLE')})`}</Text>
-                    )}
+              {loaded && (
+                <View style={styles.title}>
+                  <View style={styles.bookcars}>
+                    <Text style={styles.titleText}>{i18n.t('SEARCH_TITLE_1')}</Text>
+                    <Text style={styles.titleBookCars}>{i18n.t('BOOKCARS')}</Text>
+                    <Text style={styles.titleText}>{i18n.t('SEARCH_TITLE_2')}</Text>
                   </View>
-                )}
-              </View>
-            )}
-          />
-        </AutocompleteDropdownContextProvider>
+                  {carCount > 0 && (
+                    <Text style={styles.carCount}>{`(${carCount} ${carCount === 1 ? i18n.t('CAR_AVAILABLE') : i18n.t('CARS_AVAILABLE')})`}</Text>
+                  )}
+                </View>
+              )}
+            </View>
+          )}
+        />
       )}
     </Layout>
   )

diff --git a/mobile/screens/HomeScreen.tsx b/mobile/screens/HomeScreen.tsx
@@ -8,7 +8,6 @@ import * as helper from '../common/helper'
 import * as UserService from '../services/UserService'
 import Layout from '../components/Layout'
 import SearchForm from '../components/SearchForm'
-import { AutocompleteDropdownContextProvider } from '../components/AutocompleteDropdown-v4'
 
 const HomeScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, 'Home'>) => {
   const isFocused = useIsFocused()
@@ -41,24 +40,22 @@ const HomeScreen = ({ navigation, route }: NativeStackScreenProps<StackParams, '
   return (
     <Layout style={styles.master} navigation={navigation} onLoad={onLoad} reload={reload} route={route}>
       {init && visible && (
-        <AutocompleteDropdownContextProvider>
-          <ScrollView
-            contentContainerStyle={styles.container}
-            keyboardShouldPersistTaps={helper.android() ? 'handled' : 'always'}
-          >
+        <ScrollView
+          contentContainerStyle={styles.container}
+          keyboardShouldPersistTaps={helper.android() ? 'handled' : 'always'}
+        >
 
-            <View style={styles.contentContainer}>
-              <View style={styles.logo}>
-                <Text style={styles.logoMain}>BookCars</Text>
-                <Text style={styles.logoRegistered}>®</Text>
-              </View>
-              <SearchForm
-                navigation={navigation}
-              />
+          <View style={styles.contentContainer}>
+            <View style={styles.logo}>
+              <Text style={styles.logoMain}>BookCars</Text>
+              <Text style={styles.logoRegistered}>®</Text>
             </View>
+            <SearchForm
+              navigation={navigation}
+            />
+          </View>
 
-          </ScrollView>
-        </AutocompleteDropdownContextProvider>
+        </ScrollView>
       )}
     </Layout>
   )