Wait for the modal to open

...both in `PickerAvoidingView` and with scrolling to the picker. This
is to prevent jiggering.

Author: cubuspl42

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 { PickerStateContext } from '../PickerStateProvider';
+import { IOS_MODAL_ANIMATION_DURATION_MS, IOS_MODAL_HEIGHT } from '../constants';
 
 const styles = {
     container: {
@@ -17,6 +17,11 @@ const styles = {
     },
 };
 
+function schedule(callback, timeout) {
+    const handle = setTimeout(callback, timeout);
+    return () => clearTimeout(handle);
+}
+
 /**
  * PickerAvoidingView is a React component that adjusts the view layout to avoid
  * being covered by an open iOS UIPickerView modal. It's meant to be similar to
@@ -33,12 +38,22 @@ export function PickerAvoidingView(props) {
     const context = React.useContext(PickerStateContext);
     const isPickerOpen = context && context.isPickerOpen;
 
+    const [shouldAddSpace, setShouldAddSpace] = React.useState(false);
+
+    React.useEffect(() => {
+        if (isPickerOpen) {
+            return schedule(() => {
+                setShouldAddSpace(true);
+            }, IOS_MODAL_ANIMATION_DURATION_MS);
+        } else {
+            setShouldAddSpace(false);
+        }
+    }, [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>
+            {shouldAddSpace && <View style={styles.space} />}
         </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 + 50);
             }
         });
     }