diff --git a/readme.md b/readme.md index 4083fb2f..c8458ff4 100644 --- a/readme.md +++ b/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 diff --git a/src/components/affix/index.js b/src/components/affix/index.js index 0f85022e..c57e258b 100644 --- a/src/components/affix/index.js +++ b/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; diff --git a/src/components/counter/index.js b/src/components/counter/index.js index 35d3264f..50d52b72 100644 --- a/src/components/counter/index.js +++ b/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; diff --git a/src/components/field-outlined/index.js b/src/components/field-outlined/index.js index 7005ddf0..250463d3 100644 --- a/src/components/field-outlined/index.js +++ b/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 } }) { diff --git a/src/components/field/index.js b/src/components/field/index.js index 281b7451..63898d33 100644 --- a/src/components/field/index.js +++ b/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, }; diff --git a/src/components/helper/index.js b/src/components/helper/index.js index 6060f9f5..fef29d35 100644 --- a/src/components/helper/index.js +++ b/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); diff --git a/src/components/label/index.js b/src/components/label/index.js index 82eaf033..f1069a9e 100644 --- a/src/components/label/index.js +++ b/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, diff --git a/src/components/line/index.js b/src/components/line/index.js index 44995e98..ef1058fa 100644 --- a/src/components/line/index.js +++ b/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; diff --git a/src/components/outline/index.js b/src/components/outline/index.js index 9347a991..935d0779 100644 --- a/src/components/outline/index.js +++ b/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), }],