Allowing the field to update after a value change

package.json

@@ -3,7 +3,6 @@
   "version": "0.16.1",
   "license": "BSD-3-Clause",
   "author": "Alexander Nazarov <[email protected]>",
-
   "description": "Material textfield",
   "keywords": [
     "react",
@@ -19,24 +18,25 @@
     "floating",
     "label"
   ],
-
   "main": "index.js",
-  "files": ["index.js", "src/*", "license.txt", "readme.md", "changelog.md"],
-
+  "files": [
+    "index.js",
+    "src/*",
+    "license.txt",
+    "readme.md",
+    "changelog.md"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/n4kz/react-native-material-textfield.git"
   },
-
   "dependencies": {
     "prop-types": "^15.5.9"
   },
-
   "peerDependencies": {
     "react": ">=16.3.0",
     "react-native": ">=0.55.0"
   },
-
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@babel/runtime": "^7.5.5",
@@ -51,15 +51,15 @@
     "react-native": "0.61.2",
     "react-test-renderer": "16.10.2"
   },
-
   "scripts": {
     "test": "eslint index.js src && jest --silent",
     "lint": "eslint index.js src example/app.js",
     "jest": "jest"
   },
-
   "jest": {
     "preset": "react-native",
-    "modulePathIgnorePatterns": ["<rootDir>/example"]
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example"
+    ]
   }
-}
+}

src/components/affix/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { Animated } from 'react-native';
+import { Text, Animated } from 'react-native';
 
 import styles from './styles';
 
@@ -11,7 +11,7 @@ export default class Affix extends PureComponent {
 
   static propTypes = {
     numberOfLines: PropTypes.number,
-    style: Animated.Text.propTypes.style,
+    style: Text.propType,
 
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,

src/components/field/index.js

@@ -139,12 +139,22 @@ export default class TextField extends PureComponent {
     y1: 0,
   };
 
-  static getDerivedStateFromProps({ error }, state) {
+  static getDerivedStateFromProps({ error, value }, state) {
+    const newState = {};
+
     /* Keep last received error in state */
     if (error && error !== state.error) {
-      return { error };
+      newState.error = error;
+    }
+
+    if (value && value !== state.error) {
+      newState.text = value;
     }
 
+    const hasNewStateUpdates = Object.keys(newState).length > 0;
+
+    if (hasNewStateUpdates) return newState;
+
     return null;
   }
 

src/components/helper/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { Animated } from 'react-native';
+import { Text, Animated } from 'react-native';
 
 import styles from './styles';
 
@@ -11,7 +11,7 @@ export default class Helper extends PureComponent {
 
     disabled: PropTypes.bool,
 
-    style: Animated.Text.propTypes.style,
+    style: Text.propType,
 
     baseColor: PropTypes.string,
     errorColor: PropTypes.string,
@@ -72,8 +72,8 @@ export default class Helper extends PureComponent {
       errorColor,
     } = this.props;
 
-    let text = errored?
-      error:
+    let text = errored ?
+      error :
       title;
 
     if (null == text) {
@@ -83,8 +83,8 @@ export default class Helper extends PureComponent {
     let textStyle = {
       opacity,
 
-      color: !disabled && errored?
-        errorColor:
+      color: !disabled && errored ?
+        errorColor :
         baseColor,
     };
 

src/components/label/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { Animated } from 'react-native';
+import { Text, Animated } from 'react-native';
 
 import styles from './styles';
 
@@ -43,7 +43,7 @@ export default class Label extends PureComponent {
       y1: PropTypes.number,
     }),
 
-    style: Animated.Text.propTypes.style,
+    style: Text.propType,
     label: PropTypes.string,
   };
 
@@ -69,10 +69,10 @@ export default class Label extends PureComponent {
       return null;
     }
 
-    let color = disabled?
-      baseColor:
-      restricted?
-        errorColor:
+    let color = disabled ?
+      baseColor :
+      restricted ?
+        errorColor :
         focusAnimation.interpolate({
           inputRange: [-1, 0, 1],
           outputRange: [errorColor, baseColor, tintColor],