fix: Proptypes error on react-native 0.69

gabrieldonadel · Aug 14, 2022 · 8b88da6 · 8b88da6
1 parent ec87fd9
commit 8b88da6
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -99,6 +99,7 @@
     "preset": "react-native"
   },
   "dependencies": {
+    "deprecated-react-native-prop-types": "^2.3.0",
     "prop-types": "^15.5.9"
   },
   "devDependencies": {

diff --git a/src/components/affix/index.js b/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>
-    )
+    );
   }
 }
diff --git a/src/components/counter/index.js b/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>
-    )
+    );
   }
 }
diff --git a/src/components/field/index.js b/src/components/field/index.js
@@ -1,14 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { View, TextInput, Animated, StyleSheet, Platform } from 'react-native';
 import {
-  View,
-  Text,
-  TextInput,
-  Animated,
-  StyleSheet,
-  Platform,
+  TextPropTypes,
   ViewPropTypes,
-} from 'react-native';
+  TextInputPropTypes,
+} from 'deprecated-react-native-prop-types';
 
 import Line from '../line';
 import Label from '../label';
@@ -64,7 +61,7 @@ export default class TextField extends PureComponent {
   };
 
   static propTypes = {
-    ...TextInput.propTypes,
+    ...TextInputPropTypes,
 
     animationDuration: PropTypes.number,
 
@@ -82,9 +79,9 @@ export default class TextField extends PureComponent {
 
     labelOffset: Label.propTypes.offset,
 
-    labelTextStyle: Text.propTypes.style,
-    titleTextStyle: Text.propTypes.style,
-    affixTextStyle: Text.propTypes.style,
+    labelTextStyle: TextPropTypes.style,
+    titleTextStyle: TextPropTypes.style,
+    affixTextStyle: TextPropTypes.style,
 
     tintColor: PropTypes.string,
     textColor: PropTypes.string,
@@ -115,8 +112,8 @@ export default class TextField extends PureComponent {
     prefix: PropTypes.string,
     suffix: PropTypes.string,
 
-    containerStyle: (ViewPropTypes || View.propTypes).style,
-    inputContainerStyle: (ViewPropTypes || View.propTypes).style,
+    containerStyle: ViewPropTypes.style,
+    inputContainerStyle: ViewPropTypes.style,
   };
 
   static inputContainerStyle = styles.inputContainer;
@@ -451,7 +448,7 @@ export default class TextField extends PureComponent {
   inputProps() {
     let store = {};
 
-    for (let key in TextInput.propTypes) {
+    for (let key in TextInputPropTypes) {
       if (key === 'defaultValue') {
         continue;
       }

diff --git a/src/components/helper/index.js b/src/components/helper/index.js
@@ -1,77 +1,82 @@
-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 Helper extends PureComponent {
   static propTypes = {
     title: PropTypes.string,
     error: PropTypes.string,
     disabled: PropTypes.bool,
-    style: Text.propTypes.style,
+    style: TextPropTypes.style,
     baseColor: PropTypes.string,
     errorColor: PropTypes.string,
     focusAnimation: PropTypes.instanceOf(Animated.Value),
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
-    let { error, focusAnimation } = this.props
+    let { error, focusAnimation } = this.props;
 
     let opacity = focusAnimation.interpolate({
       inputRange: [-1, -0.5, 0],
       outputRange: [1, 0, 1],
       extrapolate: 'clamp',
-    })
+    });
 
     this.state = {
       errored: !!error,
       opacity,
-    }
+    };
   }
 
   componentDidMount() {
-    let { focusAnimation } = this.props
+    let { focusAnimation } = this.props;
 
-    this.listener = focusAnimation.addListener(this.onAnimation.bind(this))
+    this.listener = focusAnimation.addListener(this.onAnimation.bind(this));
   }
 
   componentWillUnmount() {
-    let { focusAnimation } = this.props
+    let { focusAnimation } = this.props;
 
-    focusAnimation.removeListener(this.listener)
+    focusAnimation.removeListener(this.listener);
   }
 
   onAnimation({ value }) {
     if (this.animationValue > -0.5 && value <= -0.5) {
-      this.setState({ errored: true })
+      this.setState({ errored: true });
     }
 
     if (this.animationValue < -0.5 && value >= -0.5) {
-      this.setState({ errored: false })
+      this.setState({ errored: false });
     }
 
-    this.animationValue = value
+    this.animationValue = value;
   }
 
   render() {
-    let { errored, opacity } = this.state
-    let { style, title, error, disabled, baseColor, errorColor } = this.props
+    let { errored, opacity } = this.state;
+    let { style, title, error, disabled, baseColor, errorColor } = this.props;
 
-    let text = errored ? error : title
+    let text = errored ? error : title;
 
     if (text == null) {
-      return null
+      return null;
     }
 
     let textStyle = {
       opacity,
 
       color: !disabled && errored ? errorColor : baseColor,
-    }
+    };
 
-    return <Animated.Text style={[styles.text, style, textStyle]}>{text}</Animated.Text>
+    return (
+      <Animated.Text style={[styles.text, style, textStyle]}>
+        {text}
+      </Animated.Text>
+    );
   }
 }
diff --git a/src/components/label/index.js b/src/components/label/index.js
@@ -1,15 +1,16 @@
-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 Label extends PureComponent {
   static defaultProps = {
     numberOfLines: 1,
     disabled: false,
     restricted: false,
-  }
+  };
 
   static propTypes = {
     numberOfLines: PropTypes.number,
@@ -39,9 +40,9 @@ export default class Label extends PureComponent {
       y1: PropTypes.number,
     }),
 
-    style: Text.propTypes.style,
+    style: TextPropTypes.style,
     label: PropTypes.string,
-  }
+  };
 
   render() {
     let {
@@ -59,10 +60,10 @@ export default class Label extends PureComponent {
       focusAnimation,
       labelAnimation,
       ...props
-    } = this.props
+    } = this.props;
 
     if (label == null) {
-      return null
+      return null;
     }
 
     let color = disabled
@@ -72,19 +73,19 @@ export default class Label extends PureComponent {
       : focusAnimation.interpolate({
           inputRange: [-1, 0, 1],
           outputRange: [errorColor, baseColor, tintColor],
-        })
+        });
 
     let textStyle = {
       lineHeight: (style && style.lineHeight) || fontSize,
       fontSize,
       color,
-    }
+    };
 
-    let { x0, y0, x1, y1 } = offset
+    let { x0, y0, x1, y1 } = offset;
 
-    y0 += activeFontSize
-    y0 += contentInset.label
-    y0 += fontSize * 0.25
+    y0 += activeFontSize;
+    y0 += contentInset.label;
+    y0 += fontSize * 0.25;
 
     let containerStyle = {
       transform: [
@@ -107,14 +108,14 @@ export default class Label extends PureComponent {
           }),
         },
       ],
-    }
+    };
 
     return (
       <Animated.View style={[styles.container, containerStyle]}>
         <Animated.Text style={[styles.text, style, textStyle]} {...props}>
           {label}
         </Animated.Text>
       </Animated.View>
-    )
+    );
   }
 }