PickerAvoidingView: Add delay

...to give a more visually pleasant effect.

Author: cubuspl42

src/PickerAvoidingView/index.ios.js

@@ -1,7 +1,12 @@
 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';
+
+function schedule(callback, timeout) {
+    const handle = setTimeout(callback, timeout);
+    return () => clearTimeout(handle);
+}
 
 /**
  * PickerAvoidingView is a React component that adjusts the view layout to avoid
@@ -19,10 +24,25 @@ export function PickerAvoidingView(props) {
     const context = React.useContext(PickerStateContext);
     const isPickerOpen = context && context.isPickerOpen;
 
+    const [shouldAddSpace, setShouldAddSpace] = React.useState(false);
+
+    React.useEffect(() => {
+        if (isPickerOpen) {
+            // Add a delay, as adding the padding before the modal fully expanded gives a visually unpleasant effect
+            return schedule(() => {
+                setShouldAddSpace(true);
+            }, IOS_MODAL_ANIMATION_DURATION_MS);
+        } else {
+            setShouldAddSpace(false);
+        }
+    }, [isPickerOpen]);
+
     return (
-        <View style={StyleSheet.compose(props.style, {
-            paddingBottom: isPickerOpen ? IOS_MODAL_HEIGHT : 0,
-        })}>
+        <View
+            style={StyleSheet.compose(props.style, {
+                paddingBottom: shouldAddSpace ? IOS_MODAL_HEIGHT : 0,
+            })}
+        >
             {props.children}
         </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 is effective when PickerAvoidingView is
+                // used
+                setTimeout(() => {
+                    this.props.scrollViewRef.current.scrollTo({
+                        y: textInputBottomY - modalY + 10 + this.props.scrollViewContentOffsetY,
+                    });
+                }, IOS_MODAL_ANIMATION_DURATION_MS + 50);
             }
         });
     }