Implement PickerAvoidingView and PickerStateProvider

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

Author: jakub-trzebiatowski

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>;

src/PickerAvoidingView/index.ios.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { PickerStateContext } from "../PickerStateProvider";
+import { IOS_MODAL_HEIGHT } from "../constants";
+
+const styles = {
+    container: {
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    space: {
+        height: IOS_MODAL_HEIGHT,
+    },
+};
+
+/**
+ * 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, styles.container)}>
+            <View style={styles.contentContainer}>
+                {props.children}
+            </View>
+            {isPickerOpen && <View style={styles.space}/>}
+        </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 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] = React.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,12 +5,13 @@ 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';
 
 export default class RNPickerSelect extends PureComponent {
+    static contextType = PickerStateContext;
+
     static propTypes = {
         onValueChange: PropTypes.func.isRequired,
         items: PropTypes.arrayOf(
@@ -275,6 +276,10 @@ export default class RNPickerSelect extends PureComponent {
         const animationType =
             modalProps && modalProps.animationType ? modalProps.animationType : 'slide';
 
+        if (this.context) {
+            this.context.setIsPickerOpen(!showPicker);
+        }
+
         this.triggerOpenCloseCallbacks();
 
         this.setState(
@@ -617,4 +622,4 @@ export default class RNPickerSelect extends PureComponent {
     }
 }
 
-export { defaultStyles };
+export { defaultStyles, PickerStateProvider, PickerAvoidingView };