Support passing useSafeArea for Picker modal contect (usefull for Expo users) (#1899)

Author: ethanshar

generatedTypes/src/components/picker/types.d.ts

@@ -145,6 +145,10 @@ export interface PickerBaseProps extends Omit<TextFieldProps, 'value' | 'onChang
      * Callback for modal onShow event
      */
     onShow?: () => void;
+    /**
+     * Add safe area in the Picker modal view
+     */
+    useSafeArea?: boolean;
     /**
      * Component test id
      */
@@ -211,5 +215,5 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
 }
-export declare type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'children' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'testID'>;
+export declare type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'children' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'useSafeArea' | 'testID'>;
 export {};

src/components/picker/PickerItemsList.tsx

@@ -20,6 +20,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     searchPlaceholder = 'Search...',
     onSearchChange,
     renderCustomSearch,
+    useSafeArea,
     testID
   } = props;
 
@@ -51,10 +52,11 @@ const PickerItemsList = (props: PickerItemsListProps) => {
 
   const renderItem = useCallback(({index}) => {
     return React.Children.toArray(children)[index];
-  }, [children]);
+  },
+  [children]);
 
   return (
-    <>
+    <View useSafeArea={useSafeArea}>
       <Modal.TopBar {...topBarProps}/>
       {renderSearchInput()}
 
@@ -65,7 +67,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
         keyExtractor={keyExtractor}
         {...listProps}
       />
-    </>
+    </View>
   );
 };
 

src/components/picker/api/picker.api.json

@@ -90,7 +90,8 @@
       "type": "FlatListProps",
       "description": "Pass props to the list component that wraps the picker options (allows to control FlatList behavior)"
     },
-    {"name": "pickerModalProps", "type": "ModalProps", "description": "Pass props to the picker modal"}
+    {"name": "pickerModalProps", "type": "ModalProps", "description": "Pass props to the picker modal"},
+    {"name": "useSafeArea", "type": "boolean", "description": "Add safe area in the Picker modal view"}
   ],
   "snippet": [
     "<Picker",
@@ -104,3 +105,4 @@
     "</Picker>"
   ]
 }
+   

src/components/picker/new.tsx

@@ -59,6 +59,7 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     getItemValue,
     renderItem,
     children,
+    useSafeArea,
     migrate,
     migrateTextField,
     ...others
@@ -168,6 +169,7 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
         onSearchChange={_onSearchChange}
         renderCustomSearch={renderCustomSearch}
         listProps={listProps}
+        useSafeArea={useSafeArea}
       >
         {filteredChildren}
       </PickerItemsList>
@@ -186,7 +188,8 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     _onSearchChange,
     renderCustomSearch,
     listProps,
-    filteredChildren
+    filteredChildren,
+    useSafeArea
   ]);
 
   if (useNativePicker) {

src/components/picker/types.tsx

@@ -158,6 +158,10 @@ export interface PickerBaseProps extends Omit<TextFieldProps, 'value' | 'onChang
    * Callback for modal onShow event
    */
   onShow?: () => void;
+  /**
+   * Add safe area in the Picker modal view
+   */
+  useSafeArea?: boolean;
   /**
    * Component test id
    */
@@ -241,5 +245,6 @@ export type PickerItemsListProps = Pick<
   | 'searchPlaceholder'
   | 'onSearchChange'
   | 'renderCustomSearch'
+  | 'useSafeArea'
   | 'testID'
 >;