Added pin code loading animation

src/components/pinAnimatedInput/views/pinAnimatedInputStyles.js

@@ -9,7 +9,6 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBlue',
   },
   input: {
-    alignItems: 'center',
     justifyContent: 'center',
     height: 18,
     margin: 10,

src/components/pinAnimatedInput/views/pinAnimatedInputView.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Easing, View } from 'react-native';
 
 // Styles
 import styles from './pinAnimatedInputStyles';
@@ -13,38 +13,77 @@ class PinAnimatedInput extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {};
+
+    this.dots = [];
+
+    this.dots[0] = new Animated.Value(0);
+    this.dots[1] = new Animated.Value(0);
+    this.dots[2] = new Animated.Value(0);
+    this.dots[3] = new Animated.Value(0);
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { loading } = this.props;
+    if (loading !== nextProps.loading) {
+      if (nextProps.loading) {
+        this.dots[0] = new Animated.Value(0);
+        this.dots[1] = new Animated.Value(0);
+        this.dots[2] = new Animated.Value(0);
+        this.dots[3] = new Animated.Value(0);
+        this._startLoadingAnimation();
+      } else {
+        this._stopLoadingAnimation();
+      }
+    }
+  }
+
+  _startLoadingAnimation = () => {
+    const { loading } = this.props;
+    [...Array(4)].map((item, index) => {
+      this.dots[index].setValue(0);
+    });
+    Animated.sequence([
+      ...this.dots.map(item => Animated.timing(item, {
+        toValue: 1,
+        duration: 250,
+        easing: Easing.linear,
+      })),
+    ]).start(() => {
+      if (loading) this._startLoadingAnimation();
+    });
+  };
+
+  _stopLoadingAnimation = () => {
+    [...Array(4)].map((item, index) => {
+      this.dots[index].stopAnimation();
+    });
+  };
+
   render() {
     const { pin } = this.props;
-    const test = new Animated.Value(0);
-    const tilt = test.interpolate({
-      inputRange: [0, 0.3, 0.6, 0.9],
-      outputRange: [0, -50, 50, 0],
+    const marginBottom = [];
+
+    [...Array(4)].map((item, index) => {
+      marginBottom[index] = this.dots[index].interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0, 20, 0],
       });
+    });
+
     return (
-      <Animated.View
-        style={[
-          {
-            transform: [{ translateX: tilt }],
-          },
-          styles.container,
-        ]}
-      >
-        {[...Array(4)].map((val, index) => {
+      <View style={[styles.container]}>
+        {this.dots.map((val, index) => {
           if (pin.length > index) {
             return (
-              <Animated.View key={`passwordItem-${index}`} style={styles.input}>
               <Animated.View
                 key={`passwordItem-${index}`}
-                  style={[styles.input, styles.inputWithBackground]}
+                style={[styles.input, styles.inputWithBackground, { bottom: marginBottom[index] }]}
               />
-              </Animated.View>
             );
           }
-          return <Animated.View key={`passwordItem-${index}`} style={styles.input} />;
+          return <View key={`passwordItem-${index}`} style={styles.input} />;
         })}
-      </Animated.View>
+      </View>
     );
   }
 }

src/screens/pinCode/screen/pinCodeScreen.js

@@ -11,6 +11,7 @@ class PinCodeScreen extends PureComponent {
     super(props);
     this.state = {
       pin: '',
+      loading: false,
     };
   }
 
@@ -18,10 +19,12 @@ class PinCodeScreen extends PureComponent {
 
   // Component Functions
 
-  _handleKeyboardOnPress = (value) => {
+  _handleKeyboardOnPress = async (value) => {
     const { setPinCode } = this.props;
-    const { pin } = this.state;
-
+    const { pin, loading } = this.state;
+    if (loading) {
+      return;
+    }
     if (value === 'clear') {
       this.setState({ pin: '' });
       return;
@@ -31,14 +34,15 @@ class PinCodeScreen extends PureComponent {
     if (pin.length < 3) {
       this.setState({ pin: newPin });
     } else if (pin.length === 3) {
-      this.setState({ pin: newPin });
+      await this.setState({ pin: newPin, loading: true });
+
       setPinCode(`${pin}${value}`)
         .then(() => {
           // TODO: fix unmounted component error
-          this.setState({ pin: '' });
+          this.setState({ pin: '', loading: false });
         })
         .catch(() => {
-          this.setState({ pin: '' });
+          this.setState({ pin: '', loading: false });
         });
     } else if (pin.length > 3) {
       this.setState({ pin: `${value}` });
@@ -49,7 +53,7 @@ class PinCodeScreen extends PureComponent {
     const {
       informationText, showForgotButton, username, intl,
     } = this.props;
-    const { pin } = this.state;
+    const { pin, loading } = this.state;
 
     return (
       <View style={styles.container}>
@@ -63,7 +67,7 @@ class PinCodeScreen extends PureComponent {
           <Text style={styles.informationText}>{informationText}</Text>
         </View>
         <View style={styles.animatedView}>
-          <PinAnimatedInput pin={pin} />
+          <PinAnimatedInput pin={pin} loading={loading} />
         </View>
         <View style={styles.numericKeyboardView}>
           <NumericKeyboard onPress={this._handleKeyboardOnPress} />