Implement PickerAvoidingView and PickerStateProvider

...which provide tools for ensuring that a picker is not covered by its
own modal on iOS.

Call scrollToInput() only on iOS, basing on an observation that this
method was designed to handle iOS modal specifically.

Author: cubuspl42

index.d.ts

@@ -92,3 +92,11 @@ declare class Picker extends React.Component<PickerSelectProps> {
 }
 
 export default Picker;
+
+type PickerStateProviderProps = {
+    readonly children: React.ReactChild;
+};
+
+export const PickerStateProvider: React.ComponentType<PickerStateProviderProps>;
+
+export const PickerAvoidingView: React.ComponentType<React.PropsWithChildren>;

package.json

@@ -41,7 +41,7 @@
         "prettier": "^2.0.5",
         "pretty-quick": "^2.0.1",
         "prop-types": "^15.7.2",
-        "react": "16.6.1",
+        "react": "^16.8.6",
         "react-dom": "^16.6.1",
         "react-native": "0.57.7",
         "react-test-renderer": "^16.6.1"

src/PickerAvoidingView/index.ios.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { PickerStateContext } from '../PickerStateProvider';
+import { IOS_MODAL_HEIGHT } from '../constants';
+
+/**
+ * PickerAvoidingView is a React component that adjusts the view layout to avoid
+ * being covered by an open iOS picker modal. It's meant to be similar to
+ * the built-in KeyboardAvoidingView component, but specifically tailored for
+ * iOS picker modals.
+ *
+ * In order for this component to work correctly, all the pickers and the
+ * PickerAvoidingView should have a PickerStateProvider ancestor.
+ *
+ * @param {React.ReactNode} props.children - The child components that should be
+ * protected from obstruction by the picker modal
+ */
+export function PickerAvoidingView(props) {
+    const context = React.useContext(PickerStateContext);
+    const isModalShown = context && context.isModalShown;
+
+    const style = props.enabled
+        ? StyleSheet.compose(props.style, {
+              paddingBottom: isModalShown ? IOS_MODAL_HEIGHT : 0,
+          })
+        : props.style;
+
+    return <View style={style}>{props.children}</View>;
+}
+
+PickerAvoidingView.defaultProps = {
+    enabled: true,
+};

src/PickerAvoidingView/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+
+/**
+ * As, currently, only on iOS the picker's modal resembles the software keyboard
+ * in any way, the default implementation doesn't have any avoiding logic.
+ *
+ * @param {React.ReactNode} props.children - The child components to render
+ * within the PickerAvoidingView.
+ */
+export function PickerAvoidingView(props) {
+    // eslint-disable-next-line no-unused-vars
+    const { enabled, ...viewProps } = props;
+    return <View {...viewProps}>{props.children}</View>;
+}

src/PickerStateProvider.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+
+/**
+ * @typedef {Object} PickerStateData
+ * @property {boolean} isModalOpen - Indicates whether a picker-related modal is
+ * currently being shown. Note that currently modal is opened for pickers only
+ * on iOS.
+ *
+ * PickerStateContext is a context that gives access to PickerStateData.
+ */
+export const PickerStateContext = React.createContext();
+
+/**
+ * PickerStateProvider provides PickerStateContext and manages the necessary
+ * state.
+ *
+ * This component should be used as a single top-level provider for all picker
+ * instances in your application.
+ */
+export function PickerStateProvider(props) {
+    const [isModalShown, setIsModalShown] = useState(false);
+
+    const context = {
+        isModalShown,
+        setIsModalShown,
+    };
+
+    return (
+        <PickerStateContext.Provider value={context}>{props.children}</PickerStateContext.Provider>
+    );
+}

src/constants.js

@@ -0,0 +1,3 @@
+// 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;

src/index.js

@@ -5,16 +5,17 @@ import isEqual from 'lodash.isequal';
 import { Picker } from '@react-native-picker/picker';
 import { defaultStyles } from './styles';
 import { Dimensions } from 'react-native';
-
-// 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 (from iPhone 8 to 14 Pro)
-const IOS_MODAL_HEIGHT = 262;
+import { PickerAvoidingView } from './PickerAvoidingView';
+import { PickerStateContext, PickerStateProvider } from './PickerStateProvider';
+import { IOS_MODAL_HEIGHT } from './constants';
 
 const preserveSpaces = (label) => {
     return label.replace(/ /g, '\u00a0');
 };
 
 export default class RNPickerSelect extends PureComponent {
+    static contextType = PickerStateContext;
+
     static propTypes = {
         onValueChange: PropTypes.func.isRequired,
         items: PropTypes.arrayOf(
@@ -245,7 +246,8 @@ 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,
+                    // Add 10 pixels for a more visually pleasant effect
+                    y: textInputBottomY + 10 - modalY + this.props.scrollViewContentOffsetY,
                 });
             }
         });
@@ -257,7 +259,6 @@ export default class RNPickerSelect extends PureComponent {
 
         if (!showPicker && onOpen) {
             onOpen();
-            this.scrollToInput();
         }
 
         if (showPicker && onClose) {
@@ -286,11 +287,21 @@ export default class RNPickerSelect extends PureComponent {
 
     togglePicker(animate = false, postToggleCallback) {
         const { disabled } = this.props;
+        const { showPicker } = this.state;
 
         if (disabled) {
             return;
         }
 
+        // If the picker is currently shown, toggling it will start closing the
+        // modal on iOS. Let's handle this here, instead on relying on
+        // Modal's onDismiss, because onDismiss is fired _after_ the modal
+        // closing animation ends. PickerAvoidingView behaves better (visually)
+        // when it adjusts right after the modal closing starts.
+        if (showPicker && this.context) {
+            this.context.setIsModalShown(false);
+        }
+
         this.triggerOpenCloseCallbacks();
 
         if (Keyboard.isVisible()) {
@@ -481,6 +492,13 @@ export default class RNPickerSelect extends PureComponent {
                     supportedOrientations={['portrait', 'landscape']}
                     onOrientationChange={this.onOrientationChange}
                     {...modalProps}
+                    onShow={() => {
+                        if (this.context) {
+                            this.context.setIsModalShown(true);
+                        }
+
+                        this.scrollToInput();
+                    }}
                 >
                     <TouchableOpacity
                         style={[defaultStyles.modalViewTop, style.modalViewTop]}
@@ -635,4 +653,4 @@ export default class RNPickerSelect extends PureComponent {
     }
 }
 
-export { defaultStyles };
+export { defaultStyles, PickerStateProvider, PickerAvoidingView };