Merge pull request #58 from gabrieldonadel/fix/deprecated-react-nativ…

…e-prop-types

fix: Proptypes errors on react-native 0.69

.eslintrc.js

@@ -2,10 +2,10 @@ module.exports = {
   plugins: ['react-perf'],
   extends: ['@react-native-community', 'plugin:react-perf/recommended'],
   rules: {
-    semi: 0,
+    'semi': 0,
     'react-perf/jsx-no-new-object-as-prop': 1,
     'react-perf/jsx-no-new-array-as-prop': 0,
     'react-perf/jsx-no-new-function-as-prop': 0,
     'react-perf/jsx-no-jsx-as-prop': 1,
   },
-}
+};

example/app.js

@@ -157,8 +157,7 @@ class App extends Component {
         <ScrollView
           style={styles.scroll}
           contentContainerStyle={styles.contentContainer}
-          keyboardShouldPersistTaps="handled"
-        >
+          keyboardShouldPersistTaps="handled">
           <View style={styles.container}>
             <TextField
               ref={this.firstnameRef}

index.js

@@ -1,5 +1,5 @@
-import TextField from './src/components/field'
-import FilledTextField from './src/components/field-filled'
-import OutlinedTextField from './src/components/field-outlined'
+import TextField from './src/components/field';
+import FilledTextField from './src/components/field-filled';
+import OutlinedTextField from './src/components/field-outlined';
 
-export { TextField, FilledTextField, OutlinedTextField }
+export { TextField, FilledTextField, OutlinedTextField };

package.json

@@ -99,6 +99,7 @@
     "preset": "react-native"
   },
   "dependencies": {
+    "deprecated-react-native-prop-types": "^2.3.0",
     "prop-types": "^15.5.9"
   },
   "devDependencies": {

scripts/bootstrap.js

@@ -12,7 +12,7 @@ const options = {
 };
 
 if (os.type() === 'Windows_NT') {
-  options.shell = true
+  options.shell = true;
 }
 
 let result;

src/components/affix/index.js

@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Animated, Text } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
-import styles from './styles'
+import styles from './styles';
 
 export default class Affix extends PureComponent {
   static defaultProps = {
     numberOfLines: 1,
-  }
+  };
 
   static propTypes = {
     numberOfLines: PropTypes.number,
-    style: Text.propTypes.style,
+    style: TextPropTypes.style,
 
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
@@ -20,41 +21,44 @@ export default class Affix extends PureComponent {
 
     labelAnimation: PropTypes.instanceOf(Animated.Value).isRequired,
 
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  }
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
+    ]),
+  };
 
   render() {
-    let { labelAnimation, style, children, type, fontSize, color } = this.props
+    let { labelAnimation, style, children, type, fontSize, color } = this.props;
 
     let containerStyle = {
       height: fontSize * 1.5,
       opacity: labelAnimation,
-    }
+    };
 
     let textStyle = {
       includeFontPadding: false,
       textAlignVertical: 'top',
 
       fontSize,
       color,
-    }
+    };
 
     switch (type) {
       case 'prefix':
-        containerStyle.paddingRight = 8
-        textStyle.textAlign = 'left'
-        break
+        containerStyle.paddingRight = 8;
+        textStyle.textAlign = 'left';
+        break;
 
       case 'suffix':
-        containerStyle.paddingLeft = 8
-        textStyle.textAlign = 'right'
-        break
+        containerStyle.paddingLeft = 8;
+        textStyle.textAlign = 'right';
+        break;
     }
 
     return (
       <Animated.View style={[styles.container, containerStyle]}>
         <Animated.Text style={[style, textStyle]}>{children}</Animated.Text>
       </Animated.View>
-    )
+    );
   }
 }

src/components/affix/styles.js

@@ -1,8 +1,8 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
     top: 2,
     justifyContent: 'center',
   },
-})
+});

src/components/affix/test.js

@@ -1,9 +1,9 @@
-import 'react-native'
-import React from 'react'
-import { Animated } from 'react-native'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import { Animated } from 'react-native';
+import renderer from 'react-test-renderer';
 
-import Affix from '.'
+import Affix from '.';
 
 /* eslint-env jest */
 
@@ -12,10 +12,10 @@ const props = {
   fontSize: 16,
 
   labelAnimation: new Animated.Value(1),
-}
+};
 
-const prefix = 'a'
-const suffix = 'z'
+const prefix = 'a';
+const suffix = 'z';
 
 it('renders prefix', () => {
   let affix = renderer
@@ -24,10 +24,10 @@ it('renders prefix', () => {
         {prefix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
 
 it('renders inactive prefix', () => {
   let affix = renderer
@@ -36,10 +36,10 @@ it('renders inactive prefix', () => {
         {prefix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
 
 it('renders suffix', () => {
   let affix = renderer
@@ -48,10 +48,10 @@ it('renders suffix', () => {
         {suffix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});
 
 it('renders inactive suffix', () => {
   let affix = renderer
@@ -60,7 +60,7 @@ it('renders inactive suffix', () => {
         {suffix}
       </Affix>
     )
-    .toJSON()
+    .toJSON();
 
-  expect(affix).toMatchSnapshot()
-})
+  expect(affix).toMatchSnapshot();
+});

src/components/counter/index.js

@@ -1,8 +1,9 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
-import { Text } from 'react-native'
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { Text } from 'react-native';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
-import styles from './styles'
+import styles from './styles';
 
 export default class Counter extends PureComponent {
   static propTypes = {
@@ -12,24 +13,24 @@ export default class Counter extends PureComponent {
     baseColor: PropTypes.string.isRequired,
     errorColor: PropTypes.string.isRequired,
 
-    style: Text.propTypes.style,
-  }
+    style: TextPropTypes.style,
+  };
 
   render() {
-    let { count, limit, baseColor, errorColor, style } = this.props
+    let { count, limit, baseColor, errorColor, style } = this.props;
 
     if (!limit) {
-      return null
+      return null;
     }
 
     let textStyle = {
       color: count > limit ? errorColor : baseColor,
-    }
+    };
 
     return (
       <Text style={[styles.text, style, textStyle]}>
         {count} / {limit}
       </Text>
-    )
+    );
   }
 }

src/components/counter/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   text: {
@@ -9,4 +9,4 @@ export default StyleSheet.create({
     paddingVertical: 2,
     marginLeft: 8,
   },
-})
+});

src/components/counter/test.js

@@ -1,31 +1,35 @@
-import 'react-native'
-import React from 'react'
-import renderer from 'react-test-renderer'
+import 'react-native';
+import React from 'react';
+import renderer from 'react-test-renderer';
 
-import Counter from '.'
+import Counter from '.';
 
 /* eslint-env jest */
 
 const props = {
   baseColor: 'blue',
   errorColor: 'red',
   fontSize: 12,
-}
+};
 
 it('renders null when limit is not set', () => {
-  let counter = renderer.create(<Counter count={1} {...props} />).toJSON()
+  let counter = renderer.create(<Counter count={1} {...props} />).toJSON();
 
-  expect(counter).toBeNull()
-})
+  expect(counter).toBeNull();
+});
 
 it('renders when limit is set', () => {
-  let counter = renderer.create(<Counter count={1} limit={1} {...props} />).toJSON()
+  let counter = renderer
+    .create(<Counter count={1} limit={1} {...props} />)
+    .toJSON();
 
-  expect(counter).toMatchSnapshot()
-})
+  expect(counter).toMatchSnapshot();
+});
 
 it('renders when limit is exceeded', () => {
-  let counter = renderer.create(<Counter count={2} limit={1} {...props} />).toJSON()
+  let counter = renderer
+    .create(<Counter count={2} limit={1} {...props} />)
+    .toJSON();
 
-  expect(counter).toMatchSnapshot()
-})
+  expect(counter).toMatchSnapshot();
+});

src/components/field-filled/__snapshots__/test.js.snap

@@ -51,6 +51,7 @@ exports[`renders 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -214,6 +215,7 @@ exports[`renders accessory 1`] = `
     </View>
     <Image />
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -376,6 +378,7 @@ exports[`renders counter 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -561,6 +564,7 @@ exports[`renders disabled value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -723,6 +727,7 @@ exports[`renders title 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",
@@ -902,6 +907,7 @@ exports[`renders value 1`] = `
       />
     </View>
     <View
+      pointerEvents="auto"
       style={
         Object {
           "alignSelf": "stretch",