Implement PickerAvoidingView and PickerStateProvider

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

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,29 @@
+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 UIPickerView 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 isPickerOpen = context && context.isPickerOpen;
+
+    return (
+        <View style={StyleSheet.compose(props.style, {
+            paddingBottom: isPickerOpen ? IOS_MODAL_HEIGHT : 0,
+        })}>
+            {props.children}
+        </View>
+    );
+}

src/PickerAvoidingView/index.js

@@ -0,0 +1,13 @@
+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) {
+    return <View {...props}>{props.children}</View>;
+}

src/PickerStateProvider.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+
+/**
+ * @typedef {Object} PickerStateData
+ * @property {boolean} isPickerOpen - Indicates whether any picker is currently open
+ *
+ * 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 [isPickerOpen, setIsPickerOpen] = useState(false);
+
+    const context = {
+        isPickerOpen,
+        setIsPickerOpen,
+    };
+
+    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(
@@ -286,11 +287,16 @@ export default class RNPickerSelect extends PureComponent {
 
     togglePicker(animate = false, postToggleCallback) {
         const { disabled } = this.props;
+        const { showPicker } = this.state;
 
         if (disabled) {
             return;
         }
 
+        if (this.context) {
+            this.context.setIsPickerOpen(!showPicker);
+        }
+
         this.triggerOpenCloseCallbacks();
 
         if (Keyboard.isVisible()) {
@@ -635,4 +641,4 @@ export default class RNPickerSelect extends PureComponent {
     }
 }
 
-export { defaultStyles };
+export { defaultStyles, PickerStateProvider, PickerAvoidingView };