Add extra delay in scrollToInput

...to adjust for the `PickerAvoidingView` animation.

Author: jakub-trzebiatowski

src/PickerAvoidingView/index.ios.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { PickerStateContext } from "../PickerStateProvider";
-import { IOS_MODAL_HEIGHT } from "../constants";
+import { Animated, StyleSheet, View } from 'react-native';
+import { PickerStateContext } from '../PickerStateProvider';
+import { IOS_MODAL_ANIMATION_DURATION_MS, IOS_MODAL_HEIGHT } from '../constants';
 
 const styles = {
     container: {
@@ -12,9 +12,6 @@ const styles = {
     contentContainer: {
         flex: 1,
     },
-    space: {
-        height: IOS_MODAL_HEIGHT,
-    },
 };
 
 /**
@@ -33,12 +30,24 @@ export function PickerAvoidingView(props) {
     const context = React.useContext(PickerStateContext);
     const isPickerOpen = context && context.isPickerOpen;
 
+    const spaceHeight = React.useRef(new Animated.Value(0)).current;
+
+    React.useEffect(() => {
+        if (isPickerOpen) {
+            Animated.timing(spaceHeight, {
+                toValue: IOS_MODAL_HEIGHT,
+                duration: IOS_MODAL_ANIMATION_DURATION_MS,
+                useNativeDriver: false,
+            }).start();
+        } else {
+            spaceHeight.setValue(0);
+        }
+    }, [isPickerOpen]);
+
     return (
         <View style={StyleSheet.compose(props.style, styles.container)}>
-            <View style={styles.contentContainer}>
-                {props.children}
-            </View>
-            {isPickerOpen && <View style={styles.space}/>}
+            <View style={styles.contentContainer}>{props.children}</View>
+            <Animated.View style={{ height: spaceHeight }} />
         </View>
     );
 }

src/constants.js

@@ -1,3 +1,6 @@
 // Measuring the modal before rendering is not working reliably, so we need to hardcode the height
 // This height was tested thoroughly on several iPhone models (iPhone SE, from iPhone 8 to 14 Pro, and 14 Pro Max)
 export const IOS_MODAL_HEIGHT = 262;
+
+// An approximated duration of the modal opening
+export const IOS_MODAL_ANIMATION_DURATION_MS = 500;

src/index.js

@@ -1,13 +1,21 @@
 import React, { PureComponent } from 'react';
-import { Keyboard, Modal, Platform, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import {
+    Dimensions,
+    Keyboard,
+    Modal,
+    Platform,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 import { Picker } from '@react-native-picker/picker';
 import { defaultStyles } from './styles';
-import { Dimensions } from 'react-native';
 import { PickerAvoidingView } from './PickerAvoidingView';
 import { PickerStateContext, PickerStateProvider } from './PickerStateProvider';
-import { IOS_MODAL_HEIGHT } from './constants';
+import { IOS_MODAL_ANIMATION_DURATION_MS, IOS_MODAL_HEIGHT } from './constants';
 
 export default class RNPickerSelect extends PureComponent {
     static contextType = PickerStateContext;
@@ -240,9 +248,13 @@ export default class RNPickerSelect extends PureComponent {
 
             // If TextInput is below picker modal, scroll up
             if (textInputBottomY > modalY) {
-                this.props.scrollViewRef.current.scrollTo({
-                    y: textInputBottomY - modalY + this.props.scrollViewContentOffsetY,
-                });
+                // Wait until the modal animation finishes, so the scrolling animation doesn't run at the same time as
+                // the modal animation. This prevents jiggering if PickerAvoidingView is used.
+                setTimeout(() => {
+                    this.props.scrollViewRef.current.scrollTo({
+                        y: textInputBottomY - modalY + 10 + this.props.scrollViewContentOffsetY,
+                    });
+                }, IOS_MODAL_ANIMATION_DURATION_MS);
             }
         });
     }