replace @react-native-community/picker with @react-native-picker/picker (#1063)

* replace @react-native-community/picker with @react-native-picker/picker

* Safely require Picker package

* Use optional require only for iOS

* Update expo dependncy to use @react-native-picker/picker

Author: ethanshar

expoDemo/package.json

@@ -12,7 +12,7 @@
     "@react-native-community/datetimepicker": "3.0.4",
     "@react-native-community/masked-view": "0.1.10",
     "@react-native-community/netinfo": "5.9.7",
-    "@react-native-community/picker": "^1.7.1",
+    "@react-native-picker/picker": "^1.9.4",
     "@react-navigation/native": "^5.0.8",
     "@react-navigation/stack": "^5.1.0",
     "expo": "^40.0.0",

jest-setup.js

@@ -8,3 +8,4 @@ jest.mock('@react-native-community/blur', () => {});
 jest.mock('@react-native-community/netinfo', () => {});
 jest.mock('react-native-reanimated', () => ({}));
 jest.mock('react-native-gesture-handler', () => {});
+jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));

lib/components/WheelPicker/index.js

@@ -2,11 +2,26 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {DeviceEventEmitter, requireNativeComponent, StyleSheet, View} from 'react-native';
-import {Picker} from '@react-native-community/picker';
+
 import WheelPickerItem from './WheelPickerItem';
 import {Constants} from '../../../src/helpers';
 import {Typography, Colors} from '../../../src/style';
 
+/* Safely require picker component */
+let Picker = () => null;
+if (Constants.isIOS) {
+  try {
+    Picker = require('@react-native-picker/picker').Picker; // New package
+  } catch (e) {
+    try {
+      Picker = require('@react-native-community/picker').Picker; // Deprecated package
+      console.warn(`RNUILib Picker will soon migrate to use "@react-native-picker/picker" package instead of '@react-native-community/picker'`);
+    } catch (e) {
+      console.error(`RNUILib Picker requires installing "@react-native-picker/picker" dependency`);
+    }
+  }
+}
+
 const WheelPickerNative = requireNativeComponent('WheelPicker', null);
 
 class WheelPicker extends Component {
@@ -41,7 +56,7 @@ class WheelPicker extends Component {
     /**
      * pass custom style for the picker item
      */
-    itemStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), //eslint-disable-line
+    itemStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]) //eslint-disable-line
   };
 
   static defaultProps = {
@@ -57,12 +72,12 @@ class WheelPicker extends Component {
   }
 
   state = {
-    items: this.getItems(),
+    items: this.getItems()
   };
 
-  onLogReceived = (event) => {
+  onLogReceived = event => {
     console[event.LogType](event.TAG, event.text);
-  }
+  };
 
   onValueChange(event) {
     const index = event.nativeEvent.itemIndex;
@@ -76,7 +91,7 @@ class WheelPicker extends Component {
   getItems() {
     const items = _.map(React.Children.toArray(this.props.children), child => ({
       value: child.props.value,
-      label: child.props.label,
+      label: child.props.label
     }));
     return items;
   }
@@ -94,10 +109,10 @@ class WheelPicker extends Component {
   render() {
     const {style, color, labelStyle, itemHeight} = this.props;
     const {fontSize, fontFamily} = labelStyle;
-    let {color: labelColor} = labelStyle;
+    const {color: labelColor} = labelStyle;
 
     return (
-      <View collapsable={false} style={styles.container} >
+      <View collapsable={false} style={styles.container}>
         <WheelPickerNative
           data={this.extractLabelsFromItems()}
           initialIndex={this.getInitialIndex()}
@@ -116,14 +131,14 @@ class WheelPicker extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    overflow: 'hidden',
+    overflow: 'hidden'
   },
   wheelPicker: {
     width: 200,
-    height: 200,
-  },
+    height: 200
+  }
 });
 
 WheelPicker.Item = WheelPickerItem;
 
-export default (Constants.isAndroid ? WheelPicker : Picker);
+export default Constants.isAndroid ? WheelPicker : Picker;

markdowns/getting-started/setup.md

@@ -31,7 +31,7 @@ If you're planning on using specific components, see **UILib Packages**.
 
 If you want it all, install **peer dependencies**
 ```
-npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo @react-native-community/picker
+npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo @react-native-picker/picker
 
 cd ios && pod install
 ```
@@ -50,7 +50,7 @@ It's important to run `cd ios && pod install` if you are using a component that
 - ~~"react-native-interactable": ">=2.0.0"~~ (No Need in >=V5.0.0)
 - "@react-native-community/datetimepicker": "^2.1.0"
 - "@react-native-community/netinfo": "^5.6.2"
-- "@react-native-community/picker": "^1.6.5"
+- "@react-native-picker/picker": "^1.9.4",
 
 ## Demo App
 

package.json

@@ -70,7 +70,7 @@
     "@react-native-community/datetimepicker": "^2.1.0",
     "@react-native-community/eslint-config": "^1.1.0",
     "@react-native-community/netinfo": "^5.6.2",
-    "@react-native-community/picker": "^1.6.5",
+    "@react-native-picker/picker": "^1.9.4",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
@@ -112,7 +112,7 @@
     "@react-native-community/blur": ">=3.4.1",
     "@react-native-community/datetimepicker": "^2.1.0",
     "@react-native-community/netinfo": "^5.6.2",
-    "@react-native-community/picker": "^1.6.5"
+    "@react-native-picker/picker": "^1.9.4"
   },
   "jest": {
     "preset": "react-native",