changing input active/passive and value states when it has a different value

Author: halilb

lib/BaseInput.js

@@ -43,6 +43,25 @@ export default class BaseInput extends Component {
     };
   }
 
+  componentWillReceiveProps(newProps) {
+    const newValue = newProps.value;
+    if (newValue !== this.state.value) {
+      this.setState({
+        value: newValue,
+      });
+
+      // animate input if it's active state has changed with the new value
+      // and input is not focused currently.
+      const isFocused = this.refs.input.isFocused();
+      if (!isFocused) {
+        const isActive = Boolean(newValue);
+        if (isActive !== this.isActive) {
+          this._toggle(isActive);
+        }
+      }
+    }
+  }
+
   _onLayout(event) {
     this.setState({
       width: event.nativeEvent.layout.width,
@@ -84,10 +103,11 @@ export default class BaseInput extends Component {
     this.refs.input.focus();
   }
 
-  _toggle(displayed) {
+  _toggle(isActive) {
+    this.isActive = isActive;
     Animated.timing(
       this.state.focusedAnim, {
-        toValue: displayed ? 1 : 0,
+        toValue: isActive ? 1 : 0,
         duration: this.props.animationDuration,
         easing: this.props.easing,
       },

lib/Jiro.js

@@ -37,8 +37,8 @@ export default class Jiro extends BaseInput {
     };
   }
 
-  _toggle(displayed) {
-    const animationValue = displayed ? 1 : 0;
+  _toggle(isActive) {
+    const animationValue = isActive ? 1 : 0;
     const borderPositionAnimation = Animated.timing(this.state.borderPositionAnim, {
       toValue: animationValue,
       eaasing: Easing.bezier(0.2, 1, 0.3, 1),
@@ -55,7 +55,7 @@ export default class Jiro extends BaseInput {
       duration: 200,
     });
 
-    if (displayed) {
+    if (isActive) {
       Animated.sequence([
         borderPositionAnimation,
         Animated.parallel([labelPositionAnimation, borderHeightAnimation]),