Migrate to deprecated-react-native-prop-types package (#2156)

* migrate to deprecated-react-native-prop-types

* fix pre-push command name in contributing guide

* fix typo in PR template

* revert accidential prettier formatting

* add explanation to ts-expect-error

Author: haikov

.github/pull_request_template.md

@@ -2,4 +2,4 @@
 *Enter description to help the reviewer understand what's the change about...*
 
 ## Changelog
-*Add a quick message for our users about this change (include Compoennt name, relevant props and general purpose of the PR)*
+*Add a quick message for our users about this change (include Component name, relevant props and general purpose of the PR)*

CONTRIBUTING.md

@@ -8,7 +8,7 @@ When contributing to this repository, please first discuss the change you wish t
 ## Pull Request Process
 
 1. First make sure the environment is working and synced with master. For installation details go [here](https://github.com/wix/react-native-ui-lib/blob/master/markdowns/getting-started/setup.md#demo-app)
-2. Before submitting a PR we suggest running `npm run prepush` command that verifies our lint, TS and tests were not broken.
+2. Before submitting a PR we suggest running `npm run pre-push` command that verifies our lint, TS and tests were not broken.
 3. Please use our PR prefixes accordingly. `fix` for bugfix, `feat` for feature, `infra` for infrastructure changes and `docs` for documentation related changes (e.g `fix/ButtonStyle`, `feat/Avatar_colorProp`)
 4. Please don't change our PR template.
   - In the Description section add everything that can help the reviewer and the reviewing process, like a description of the issue and the way you decided to go about it, screenshots or gifs, etc.

demo/src/screens/MainScreen.js

@@ -2,7 +2,8 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import AsyncStorage from '@react-native-community/async-storage';
 import PropTypes from 'prop-types';
-import {StyleSheet, FlatList, ViewPropTypes} from 'react-native';
+import {StyleSheet, FlatList} from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import {Navigation} from 'react-native-navigation';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {

package.json

@@ -38,6 +38,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
     "color": "^3.1.0",
     "commons-validator-js": "^1.0.237",
+    "deprecated-react-native-prop-types": "^2.3.0",
     "hoist-non-react-statics": "^3.0.0",
     "lodash": "^4.17.21",
     "memoize-one": "^5.0.5",

src/components/animatedScanner/index.js

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {ViewPropTypes, StyleSheet, Animated} from 'react-native';
+import {StyleSheet, Animated} from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import {Colors} from '../../style';
 import {BaseComponent} from '../../commons';
 import View from '../../components/view';

src/components/baseInput/index.tsx

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import 'react';
-import {ViewPropTypes, TextInput as RNTextInput} from 'react-native';
+import {ViewPropTypes, TextInputPropTypes} from 'deprecated-react-native-prop-types';
 import {Colors, Typography} from '../../style';
 import {BaseComponent} from '../../commons';
 import Validators from './Validators';
@@ -19,7 +19,7 @@ export default class BaseInput extends BaseComponent {
   static displayName = 'BaseInput';
 
   static propTypes = {
-    ...RNTextInput.propTypes,
+    ...TextInputPropTypes,
     // ...BaseComponent.propTypes,
     /**
      * text color

src/components/carousel/types.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import {ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, PointPropType, Animated} from 'react-native';
+import {ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, Animated} from 'react-native';
+// @ts-expect-error No typings available for 'deprecated-react-native-prop-types'
+import {PointPropType} from 'deprecated-react-native-prop-types';
 import {PageControlProps} from '../pageControl';
 
 export enum PageControlPosition {
@@ -91,7 +93,7 @@ export interface CarouselProps extends ScrollViewProps {
    */
   horizontal?: boolean | null;
   /**
-   * Pass to attach to ScrollView's Animated.event in order to animated elements base on 
+   * Pass to attach to ScrollView's Animated.event in order to animated elements base on
    * Carousel scroll offset (pass new Animated.ValueXY())
    */
   animatedScrollOffset?: Animated.ValueXY;

src/components/image/index.tsx

@@ -6,10 +6,11 @@ import {
   Image as RNImage,
   ImageProps as RNImageProps,
   ImageBackground,
-  ImageSourcePropType,
   NativeSyntheticEvent,
   ImageErrorEventData
 } from 'react-native';
+// @ts-expect-error No typings available for 'deprecated-react-native-prop-types'
+import {ImagePropTypes} from 'deprecated-react-native-prop-types';
 import {
   Constants,
   asBaseComponent,
@@ -28,7 +29,7 @@ export type ImageProps = RNImageProps &
     /**
      * custom source transform handler for manipulating the image source (great for size control)
      */
-    sourceTransformer?: (props: any) => ImageSourcePropType;
+    sourceTransformer?: (props: any) => ImagePropTypes.source;
     /**
      * if provided image source will be driven from asset name
      */
@@ -73,7 +74,7 @@ export type ImageProps = RNImageProps &
     /**
      * Default image source in case of an error
      */
-    errorSource?: ImageSourcePropType;
+    errorSource?: ImagePropTypes.source;
     /**
      * An imageId that can be used in sourceTransformer logic
      */
@@ -90,7 +91,7 @@ type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
 
 type State = {
   error: boolean;
-  prevSource: ImageSourcePropType;
+  prevSource: ImagePropTypes.source;
 };
 
 /**
@@ -111,7 +112,7 @@ class Image extends PureComponent<Props, State> {
   public static overlayTypes = Overlay.overlayTypes;
   public static overlayIntensityType = Overlay.intensityTypes;
 
-  sourceTransformer?: (props: any) => ImageSourcePropType;
+  sourceTransformer?: (props: any) => ImagePropTypes.source;
 
   constructor(props: Props) {
     super(props);
@@ -149,7 +150,7 @@ class Image extends PureComponent<Props, State> {
     return !!overlayType || this.isGif() || !_.isUndefined(customOverlayContent);
   }
 
-  getVerifiedSource(source?: ImageSourcePropType) {
+  getVerifiedSource(source?: ImagePropTypes.source) {
     if (_.get(source, 'uri') === null || _.get(source, 'uri') === '') {
       // @ts-ignore
       return {...source, uri: undefined};

src/components/maskedInput/old.js

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {StyleSheet, ViewPropTypes, Keyboard} from 'react-native';
+import {StyleSheet, Keyboard} from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import BaseInput from '../baseInput';
 import TextField from '../textField';
 import View from '../view';

src/components/picker/PickerDialog.android.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import {StyleSheet, Text as RNText} from 'react-native';
+import {StyleSheet} from 'react-native';
+import {TextPropTypes} from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
@@ -17,11 +18,11 @@ class PickerDialog extends Component {
     /**
      * select label style
      */
-    selectLabelStyle: RNText.propTypes.style,
+    selectLabelStyle: TextPropTypes.style,
     /**
      * cancel label style
      */
-    cancelLabelStyle: RNText.propTypes.style
+    cancelLabelStyle: TextPropTypes.style
   };
 
   state = {};
@@ -59,8 +60,7 @@ class PickerDialog extends Component {
     );
   }
 
-
-  render() {  
+  render() {
     const {panDirection, visible, pickerModalProps} = this.props;
     return (
       <Dialog {...pickerModalProps} visible={visible} height="50%" width="77%" panDirection={panDirection}>