Picker update items when children is changed

src/components/picker/PickerItemsList.tsx

@@ -10,6 +10,7 @@ import Icon from '../icon';
 import WheelPicker from '../WheelPicker';
 import {PickerItemProps, PickerItemsListProps, PickerSingleValue} from './types';
 import PickerContext from './PickerContext';
+import PickerItem from './PickerItem';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -66,7 +67,14 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   },
   [children]);
 
+  const renderPropItems = useCallback(({item}: ListRenderItemInfo<PickerItemProps>) => {
+    return <PickerItem {...item}/>;
+  }, []);
+
   const renderList = () => {
+    if (items) {
+      return <FlatList data={items} renderItem={renderPropItems} keyExtractor={keyExtractor} {...listProps}/>;
+    }
     return (
       <FlatList
         data={_.times(React.Children.count(children))}

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

@@ -92,7 +92,8 @@
       "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": "useSafeArea", "type": "boolean", "description": "Add safe area in the Picker modal view"}
+    {"name": "useSafeArea", "type": "boolean", "description": "Add safe area in the Picker modal view"},
+    {"name": "items", "type": "{label: string, value: string | number}[]", "description": "Data source for Picker"}
   ],
   "snippet": [
     "<Picker",

src/components/picker/helpers/usePickerLabel.tsx

@@ -41,7 +41,7 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
 
     return _.get(selectedItem, 'label');
   },
-  [getLabelsFromArray]);
+  [getLabelsFromArray, items]);
 
   const accessibilityInfo = useMemo(() => {
     const label = _getLabel(value);

src/components/picker/index.tsx

@@ -5,7 +5,7 @@
 // TODO: consider deprecating renderCustomModal prop
 // TODO: deprecate onShow cause it's already supported by passing it in pickerModalProps
 import _ from 'lodash';
-import React, {useMemo, useState, useRef, useCallback} from 'react';
+import React, {useMemo, useState, useRef, useCallback, useEffect} from 'react';
 import {LayoutChangeEvent} from 'react-native';
 import {Typography} from 'style';
 import {useThemeProps} from 'hooks';
@@ -90,12 +90,19 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     migrateTextField = true,
     accessibilityLabel,
     accessibilityHint,
+    items: propItems,
     ...others
   } = themeProps;
   const {preset} = others;
 
   const [selectedItemPosition, setSelectedItemPosition] = useState(0);
-  const [items] = useState(extractPickerItems(themeProps));
+  const [items, setItems] = useState(propItems || extractPickerItems(themeProps));
+
+  useEffect(() => {
+    if (propItems) {
+      setItems(propItems);
+    }
+  }, [propItems]);
 
   const pickerExpandable = useRef<ExpandableOverlayMethods>(null);
 
@@ -204,11 +211,12 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   };
 
   const expandableModalContent = useMemo(() => {
+    const useItems = useWheelPicker || propItems;
     return (
       <PickerItemsList
         testID={`${testID}.modal`}
         useWheelPicker={useWheelPicker}
-        items={useWheelPicker ? items : undefined}
+        items={useItems ? items : undefined}
         topBarProps={{
           ...topBarProps,
           onCancel: cancelSelect,

src/components/picker/types.tsx

@@ -175,6 +175,10 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> &
      * Add safe area in the Picker modal view
      */
     useSafeArea?: boolean;
+    /**
+     * Data source for Picker
+     */
+    items?: Pick<PickerItemProps, 'label' | 'value' | 'disabled'>[];
     /**
      * Component test id
      */