Solved Issues of prop types and warning of useNativeDriver

readme.md

@@ -17,6 +17,8 @@
 [![travis][travis-badge]][travis-url]
 [![codeclimate][codeclimate-badge]][codeclimate-url]
 
+This is fork from react-native-material-textfield it has solved issues of proptypes and native driver warning 
+
 Material texfield with consistent behaviour on iOS and Android
 
 ![example][example-url]
@@ -41,7 +43,12 @@ Material texfield with consistent behaviour on iOS and Android
 ## Installation
 
 ```bash
-npm install --save react-native-material-textfield
+npm install Uzef1997/react-native-material-textfield
+```
+To use it with typescript 
+
+```bash
+npm install @types/react-native-material-textfield
 ```
 
 ## Usage

src/components/affix/index.js

@@ -9,27 +9,6 @@ export default class Affix extends PureComponent {
     numberOfLines: 1,
   };
 
-  static propTypes = {
-    numberOfLines: PropTypes.number,
-    style: Animated.Text.propTypes.style,
-
-    color: PropTypes.string.isRequired,
-    fontSize: PropTypes.number.isRequired,
-
-    type: PropTypes
-      .oneOf(['prefix', 'suffix'])
-      .isRequired,
-
-    labelAnimation: PropTypes
-      .instanceOf(Animated.Value)
-      .isRequired,
-
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-    ]),
-  };
-
   render() {
     let { labelAnimation, style, children, type, fontSize, color } = this.props;
 

src/components/counter/index.js

@@ -5,15 +5,6 @@ import { Text } from 'react-native';
 import styles from './styles';
 
 export default class Counter extends PureComponent {
-  static propTypes = {
-    count: PropTypes.number.isRequired,
-    limit: PropTypes.number,
-
-    baseColor: PropTypes.string.isRequired,
-    errorColor: PropTypes.string.isRequired,
-
-    style: Text.propTypes.style,
-  };
 
   render() {
     let { count, limit, baseColor, errorColor, style } = this.props;

src/components/field-outlined/index.js

@@ -33,7 +33,7 @@ export default class OutlinedTextField extends TextField {
     super(props);
 
     this.onTextLayout = this.onTextLayout.bind(this);
-    this.state.labelWidth = new Animated.Value(0);
+    this.state.labelWidth = new Animated.Value(0,{useNativeDriver: true});
   }
 
   onTextLayout({ nativeEvent: { lines } }) {

src/components/field/index.js

@@ -65,61 +65,61 @@ export default class TextField extends PureComponent {
     disabled: false,
   };
 
-  static propTypes = {
-    ...TextInput.propTypes,
+  // static propTypes = {
+  //   ...TextInput.propTypes,
 
-    animationDuration: PropTypes.number,
+  //   animationDuration: PropTypes.number,
 
-    fontSize: PropTypes.number,
-    labelFontSize: PropTypes.number,
+  //   fontSize: PropTypes.number,
+  //   labelFontSize: PropTypes.number,
 
-    contentInset: PropTypes.shape({
-      top: PropTypes.number,
-      label: PropTypes.number,
-      input: PropTypes.number,
-      left: PropTypes.number,
-      right: PropTypes.number,
-      bottom: PropTypes.number,
-    }),
+  //   contentInset: PropTypes.shape({
+  //     top: PropTypes.number,
+  //     label: PropTypes.number,
+  //     input: PropTypes.number,
+  //     left: PropTypes.number,
+  //     right: PropTypes.number,
+  //     bottom: PropTypes.number,
+  //   }),
 
-    labelOffset: Label.propTypes.offset,
+  //   labelOffset: Label.propTypes.offset,
 
-    labelTextStyle: Text.propTypes.style,
-    titleTextStyle: Text.propTypes.style,
-    affixTextStyle: Text.propTypes.style,
+  //   labelTextStyle: Text.propTypes.style,
+  //   titleTextStyle: Text.propTypes.style,
+  //   affixTextStyle: Text.propTypes.style,
 
-    tintColor: PropTypes.string,
-    textColor: PropTypes.string,
-    baseColor: PropTypes.string,
+  //   tintColor: PropTypes.string,
+  //   textColor: PropTypes.string,
+  //   baseColor: PropTypes.string,
 
-    label: PropTypes.string,
-    title: PropTypes.string,
+  //   label: PropTypes.string,
+  //   title: PropTypes.string,
 
-    characterRestriction: PropTypes.number,
+  //   characterRestriction: PropTypes.number,
 
-    error: PropTypes.string,
-    errorColor: PropTypes.string,
+  //   error: PropTypes.string,
+  //   errorColor: PropTypes.string,
 
-    lineWidth: PropTypes.number,
-    activeLineWidth: PropTypes.number,
-    disabledLineWidth: PropTypes.number,
+  //   lineWidth: PropTypes.number,
+  //   activeLineWidth: PropTypes.number,
+  //   disabledLineWidth: PropTypes.number,
 
-    lineType: Line.propTypes.lineType,
-    disabledLineType: Line.propTypes.lineType,
+  //   lineType: Line.propTypes.lineType,
+  //   disabledLineType: Line.propTypes.lineType,
 
-    disabled: PropTypes.bool,
+  //   disabled: PropTypes.bool,
 
-    formatText: PropTypes.func,
+  //   formatText: PropTypes.func,
 
-    renderLeftAccessory: PropTypes.func,
-    renderRightAccessory: PropTypes.func,
+  //   renderLeftAccessory: PropTypes.func,
+  //   renderRightAccessory: PropTypes.func,
 
-    prefix: PropTypes.string,
-    suffix: PropTypes.string,
+  //   prefix: PropTypes.string,
+  //   suffix: PropTypes.string,
 
-    containerStyle: (ViewPropTypes || View.propTypes).style,
-    inputContainerStyle: (ViewPropTypes || View.propTypes).style,
-  };
+  //   containerStyle: (ViewPropTypes || View.propTypes).style,
+  //   inputContainerStyle: (ViewPropTypes || View.propTypes).style,
+  // };
 
   static inputContainerStyle = styles.inputContainer;
 
@@ -175,8 +175,8 @@ export default class TextField extends PureComponent {
       text,
       error,
 
-      focusAnimation: new Animated.Value(focusState),
-      labelAnimation: new Animated.Value(labelState),
+      focusAnimation: new Animated.Value(focusState,{useNativeDriver: false}),
+      labelAnimation: new Animated.Value(labelState, {useNativeDriver: false}),
 
       receivedFocus: false,
 
@@ -223,6 +223,7 @@ export default class TextField extends PureComponent {
 
     let options = {
       toValue: this.focusState(),
+      useNativeDriver: false,
       duration,
     };
 

src/components/helper/index.js

@@ -5,20 +5,6 @@ import { Animated } from 'react-native';
 import styles from './styles';
 
 export default class Helper extends PureComponent {
-  static propTypes = {
-    title: PropTypes.string,
-    error: PropTypes.string,
-
-    disabled: PropTypes.bool,
-
-    style: Animated.Text.propTypes.style,
-
-    baseColor: PropTypes.string,
-    errorColor: PropTypes.string,
-
-    focusAnimation: PropTypes.instanceOf(Animated.Value),
-  };
-
   constructor(props) {
     super(props);
 

src/components/label/index.js

@@ -11,42 +11,6 @@ export default class Label extends PureComponent {
     restricted: false,
   };
 
-  static propTypes = {
-    numberOfLines: PropTypes.number,
-
-    disabled: PropTypes.bool,
-    restricted: PropTypes.bool,
-
-    fontSize: PropTypes.number.isRequired,
-    activeFontSize: PropTypes.number.isRequired,
-
-    baseColor: PropTypes.string.isRequired,
-    tintColor: PropTypes.string.isRequired,
-    errorColor: PropTypes.string.isRequired,
-
-    focusAnimation: PropTypes
-      .instanceOf(Animated.Value)
-      .isRequired,
-
-    labelAnimation: PropTypes
-      .instanceOf(Animated.Value)
-      .isRequired,
-
-    contentInset: PropTypes.shape({
-      label: PropTypes.number,
-    }),
-
-    offset: PropTypes.shape({
-      x0: PropTypes.number,
-      y0: PropTypes.number,
-      x1: PropTypes.number,
-      y1: PropTypes.number,
-    }),
-
-    style: Animated.Text.propTypes.style,
-    label: PropTypes.string,
-  };
-
   render() {
     let {
       label,

src/components/line/index.js

@@ -16,24 +16,6 @@ export default class Line extends PureComponent {
     restricted: false,
   };
 
-  static propTypes = {
-    lineType: lineTypes,
-    disabledLineType: lineTypes,
-
-    disabled: PropTypes.bool,
-    restricted: PropTypes.bool,
-
-    tintColor: PropTypes.string,
-    baseColor: PropTypes.string,
-    errorColor: PropTypes.string,
-
-    lineWidth: PropTypes.number,
-    activeLineWidth: PropTypes.number,
-    disabledLineWidth: PropTypes.number,
-
-    focusAnimation: PropTypes.instanceOf(Animated.Value),
-  };
-
   static getDerivedStateFromProps(props, state) {
     let { lineWidth, activeLineWidth, disabledLineWidth } = props;
 

src/components/outline/index.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { Fragment, PureComponent } from 'react';
 import { View, Animated, I18nManager } from 'react-native';
 
@@ -11,30 +10,6 @@ export default class Line extends PureComponent {
     restricted: false,
   };
 
-  static propTypes = {
-    lineType: PropTypes.oneOf(['solid', 'none']),
-
-    disabled: PropTypes.bool,
-    restricted: PropTypes.bool,
-
-    tintColor: PropTypes.string,
-    baseColor: PropTypes.string,
-    errorColor: PropTypes.string,
-
-    lineWidth: PropTypes.number,
-    activeLineWidth: PropTypes.number,
-    disabledLineWidth: PropTypes.number,
-
-    focusAnimation: PropTypes.instanceOf(Animated.Value),
-    labelAnimation: PropTypes.instanceOf(Animated.Value),
-    labelWidth: PropTypes.instanceOf(Animated.Value),
-
-    contentInset: PropTypes.shape({
-      left: PropTypes.number,
-      right: PropTypes.number,
-    }),
-  };
-
   borderProps() {
     let {
       disabled,
@@ -87,10 +62,10 @@ export default class Line extends PureComponent {
 
     let labelOffset = 2 * (contentInset.left - 2 * borderRadius);
     let lineOffset = Animated.add(labelWidth, labelOffset);
-
+    
     let topLineContainerStyle = {
       transform: [{
-        scaleX: I18nManager.isRTL? -1 : 1,
+        scaleX: I18nManager.isRTL ? -1 : 1,
       }, {
         translateX: Animated.multiply(labelAnimation, lineOffset),
       }],