Add a migrate prop to Picker component for migrating to the new API (#1048)

* Add a migrate prop to Picker component for migrating to the new API

* acknoledge migrate prop when checking if picker item is selected

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js

@@ -235,6 +235,7 @@ export default class PickerScreen extends Component {
           <Text text60 marginT-s5 marginB-s2>Migrated Picker</Text>
 
           <Picker
+            migrate
             title="Language"
             placeholder="Favorite Language"
             value={this.state.language2}

src/components/picker/PickerItem.js

@@ -29,8 +29,8 @@ const PickerItem = props => {
     testID
   } = props;
   const context = useContext(PickerContext);
-  const {renderItem} = context;
-  const isSelected = isItemSelected(value, context.value);
+  const {migrate, renderItem} = context;
+  const isSelected = isItemSelected(value, !migrate && _.isObject(context.value) ? context.value.value : context.value);
   const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
   const accessibilityProps = {
     accessibilityState: isSelected ? {selected: true} : undefined,
@@ -51,8 +51,12 @@ const PickerItem = props => {
   }, [isSelected, disabled, selectedIcon, selectedIconColor]);
 
   const _onPress = useCallback(() => {
-    context.onPress(value);
-  }, [value, context.onPress]);
+    if (migrate) {
+      context.onPress(value);
+    } else {
+      context.onPress(_.isObject(value) ? value : {value, label: itemLabel});
+    }
+  }, [migrate, value, context.onPress]);
 
   const onSelectedLayout = useCallback((...args) => {
     _.invoke(context, 'onSelectedLayout', ...args);

src/components/picker/index.js

@@ -30,6 +30,10 @@ const ItemType = PropTypes.shape({
 class Picker extends PureComponent {
   static displayName = 'Picker';
   static propTypes = {
+    /**
+     * Temporary prop required for migration to Picker's new API
+     */
+    migrate: PropTypes.bool,
     ...TextField.propTypes,
     /**
      * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop
@@ -204,8 +208,9 @@ class Picker extends PureComponent {
 
   getContextValue = () => {
     const {value, searchValue} = this.state;
-    const {mode, getItemValue, getItemLabel, renderItem, showSearch} = this.props;
+    const {migrate, mode, getItemValue, getItemLabel, renderItem, showSearch} = this.props;
     return {
+      migrate,
       value,
       onPress: mode === Picker.modes.MULTI ? this.toggleItemSelection : this.onDoneSelecting,
       getItemValue,