feat: improve rendering (#151)

Author: onmotion

example/components/ModalExample.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useState } from 'react'
-import { Button, Dimensions, Modal, SafeAreaView, View } from 'react-native'
+import { Button, Dimensions, KeyboardAvoidingView, Modal, Platform, SafeAreaView, ScrollView, View } from 'react-native'
 import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown'
-import { RemoteDataSetExample } from './RemoteDataSetExample'
 import { LocalDataSetExample } from './LocalDataSetExample'
 
 export const ModalExample = memo(() => {
@@ -14,16 +13,28 @@ export const ModalExample = memo(() => {
         presentationStyle="formSheet"
         animationType="slide"
         onRequestClose={() => setOpened(false)}>
-        <SafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }}>
-          <AutocompleteDropdownContextProvider>
-            <View style={{ paddingHorizontal: 20, flex: 1, paddingTop: 20 }}>
-              <LocalDataSetExample />
-              <View style={{ height: Dimensions.get('screen').height - 300 }} />
-              <RemoteDataSetExample />
-              <Button onPress={() => setOpened(false)} title="Close modal" />
-            </View>
-          </AutocompleteDropdownContextProvider>
-        </SafeAreaView>
+        <AutocompleteDropdownContextProvider>
+          <SafeAreaView style={{ flex: 1 }}>
+            <KeyboardAvoidingView
+              style={{ flex: 1 }}
+              behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+              keyboardVerticalOffset={Platform.select({ ios: 75, default: 0 })}>
+              <ScrollView
+                nestedScrollEnabled
+                keyboardDismissMode="on-drag"
+                keyboardShouldPersistTaps="handled"
+                contentInsetAdjustmentBehavior="automatic"
+                style={{ flex: 1 }}>
+                <View style={{ paddingHorizontal: 20, flex: 1, paddingTop: 20 }}>
+                  <LocalDataSetExample />
+                  <View style={{ height: Dimensions.get('screen').height - 300 }} />
+                  <LocalDataSetExample />
+                  <Button onPress={() => setOpened(false)} title="Close modal" />
+                </View>
+              </ScrollView>
+            </KeyboardAvoidingView>
+          </SafeAreaView>
+        </AutocompleteDropdownContextProvider>
       </Modal>
     </>
   )

src/AutocompleteDropdownContext.tsx

@@ -38,12 +38,12 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
   const [show, setShow] = useState(false)
   const [dropdownHeight, setDropdownHeight] = useState(0)
   const [inputMeasurements, setInputMeasurements] = useState<
-    { x: number; y: number; width: number; height: number } | undefined
+    { x: number; topY: number; bottomY: number; width: number; height: number } | undefined
   >()
   const [opacity, setOpacity] = useState(0)
-  const [contentStyles, setContentStyles] = useState<{ top: number; left: number; width?: number } | undefined>(
-    undefined,
-  )
+  const [contentStyles, setContentStyles] = useState<
+    { top?: number; left: number; width?: number; bottom?: number } | undefined
+  >(undefined)
   const activeInputContainerRef = useRef<View>(null)
   const wrapperRef = useRef<View>(null)
   const activeControllerRef = useRef<IAutocompleteDropdownRef | null>(null)
@@ -58,58 +58,58 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
 
     if (dropdownHeight && direction === 'up') {
       setContentStyles({
-        top: inputMeasurements.y - dropdownHeight - 10 - headerOffset,
+        bottom: inputMeasurements.bottomY + 5 + headerOffset,
+        top: undefined,
         left: inputMeasurements.x,
         width: inputMeasurements.width,
       })
       setOpacity(1)
     } else if (direction === 'down') {
       setContentStyles({
-        top: inputMeasurements.y + inputMeasurements.height + 5 + headerOffset,
+        top: inputMeasurements.topY + inputMeasurements.height + 5 + headerOffset,
+        bottom: undefined,
         left: inputMeasurements.x,
         width: inputMeasurements.width,
       })
       setOpacity(1)
     }
-  }, [
-    direction,
-    dropdownHeight,
-    headerOffset,
-    inputMeasurements?.height,
-    inputMeasurements?.width,
-    inputMeasurements?.x,
-    inputMeasurements?.y,
-  ])
+  }, [direction, dropdownHeight, headerOffset, inputMeasurements])
+
+  const recalculatePosition = useCallback((showAfterCalculation = false) => {
+    activeInputContainerRef?.current?.measure((x, y, width, height, inputPageX, inputPageY) => {
+      wrapperRef.current?.measure((wrapperX, wrapperY, wrapperW, wrapperH, wrapperPageX, wrapperPageY) => {
+        const currentMeasurement = {
+          width,
+          height,
+          x: inputPageX,
+          topY: inputPageY - wrapperPageY,
+          bottomY: wrapperH - inputPageY + wrapperPageY,
+        }
+        setInputMeasurements(prev =>
+          JSON.stringify(prev) === JSON.stringify(currentMeasurement) ? prev : currentMeasurement,
+        )
+        showAfterCalculation && setShow(true)
+      })
+    })
+  }, [])
 
   useEffect(() => {
     if (content) {
-      activeInputContainerRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-        wrapperRef.current?.measure((wrapperX, wrapperY, wrapperW, wrapperH, wrapperPageX, wrapperPageY) => {
-          setInputMeasurements({ x: pageX, y: pageY - wrapperPageY, width, height })
-          setShow(true)
-        })
-      })
+      recalculatePosition(true)
     } else {
       setInputMeasurements(undefined)
       setDropdownHeight(0)
       setOpacity(0)
       setContentStyles(undefined)
       setShow(false)
     }
-  }, [content])
+  }, [content, recalculatePosition])
 
   useEffect(() => {
     if (show && !!opacity) {
       positionTrackingIntervalRef.current = setInterval(() => {
         requestAnimationFrame(() => {
-          activeInputContainerRef?.current?.measure((_x, _y, width, height, inputPageX, inputPageY) => {
-            wrapperRef.current?.measure((wrapperX, wrapperY, wrapperW, wrapperH, wrapperPageX, wrapperPageY) => {
-              const currentMeasurement = { x: inputPageX, y: inputPageY - wrapperPageY, width, height }
-              setInputMeasurements(prev =>
-                JSON.stringify(prev) === JSON.stringify(currentMeasurement) ? prev : currentMeasurement,
-              )
-            })
-          })
+          recalculatePosition()
         })
       }, 16)
     } else {
@@ -119,7 +119,7 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
     return () => {
       clearInterval(positionTrackingIntervalRef.current)
     }
-  }, [opacity, show])
+  }, [recalculatePosition, opacity, show])
 
   const onLayout: ViewProps['onLayout'] = useCallback((e: LayoutChangeEvent) => {
     setDropdownHeight(e.nativeEvent.layout.height)