fixed animation

1 files changed, 81 insertions, 75 deletions

diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index e53411ae..277331b2 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -1,9 +1,8 @@
 import AsyncStorage from '@react-native-community/async-storage';
-import { useNavigation } from '@react-navigation/core';
-import { RouteProp } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { defineLocale } from 'moment';
-import React, { useEffect, useRef, useState } from 'react';
+import {useNavigation} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useState} from 'react';
 import {
   Alert,
   KeyboardAvoidingView,
@@ -14,8 +13,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { createAnimatableComponent } from 'react-native-animatable';
-import Animated from 'react-native-reanimated';
+import {normalize} from 'react-native-elements';
+import Animated, {Easing} from 'react-native-reanimated';
 import {
   ArrowButton,
   Background,
@@ -39,10 +38,10 @@ import {
   ERROR_TWILIO_SERVER_ERROR,
   ERROR_T_AND_C_NOT_ACCEPTED,
 } from '../../constants/strings';
-import { OnboardingStackParams } from '../../routes';
-import { sendOtpStatusCode, sendRegister } from '../../services';
-import { BackgroundGradientType } from '../../types';
-import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../utils';
+import {OnboardingStackParams} from '../../routes';
+import {sendOtpStatusCode, sendRegister} from '../../services';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 type BasicInfoOnboardingRouteProp = RouteProp<
   OnboardingStackParams,
@@ -57,16 +56,18 @@ interface BasicInfoOnboardingProps {
   navigation: BasicInfoOnboardingNavigationProp;
 }
 
-const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
-  const { isPhoneVerified } = route.params;
+const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
+  const {isPhoneVerified} = route.params;
   const navigation = useNavigation();
   const [attemptedSubmit, setAttemptedSubmit] = useState(false);
   const [valid, setValid] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
   const [tcAccepted, setTCAccepted] = useState(false);
   const [passVisibility, setPassVisibility] = useState(false);
-  const [autoCapitalize, setAutoCap] = useState('None')
-  const [fadeIn, setFadeIn] = useState(new Animated.Value(0))
+  const [autoCapitalize, setAutoCap] = useState('None');
+  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
+    new Animated.Value(0),
+  );
   const [form, setForm] = useState({
     fname: '',
     lname: '',
@@ -75,15 +76,18 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
     email: '',
     password: '',
   });
-  const fadeAnim = useRef(new Animated.Value(0)).current;
 
-  const fadeCopmponentIn = () => {
-      // Will change fadeAnim value to 1 in 5 seconds
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 5000
-      }).start();
-    };
+  const fadeComponentIn = async () => {
+    Animated.timing(fadeValue, {
+      toValue: 1,
+      duration: 1000,
+      easing: Easing.linear,
+    }).start();
+  };
+
+  useEffect(() => {
+    fadeComponentIn();
+  }, [fadeValue]);
 
   const goNext = async () => {
     if (!attemptedSubmit) {
@@ -91,13 +95,12 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
     }
     try {
       if (valid) {
-        const { phone } = form;
-        const code = 200;
-        //await sendOtpStatusCode(phone);
+        const {phone} = form;
+        const code = await sendOtpStatusCode(phone);
         if (code) {
           switch (code) {
             case 200:
-              const { fname, lname } = form;
+              const {fname, lname} = form;
               navigation.navigate('PhoneVerification', {
                 firstName: fname,
                 lastName: lname,
@@ -186,31 +189,31 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
     placeholder: string;
     onChangeText: (text: string) => void;
   }[] = [
-      {
-        placeholder: 'First Name',
-        onChangeText: (text) => handleNameUpdate(text, 0),
-      },
-      {
-        placeholder: 'Last Name',
-        onChangeText: (text) => handleNameUpdate(text, 1),
-      },
-      {
-        placeholder: 'Phone',
-        onChangeText: handlePhoneUpdate,
-      },
-      {
-        placeholder: 'School Email',
-        onChangeText: handleEmailUpdate,
-      },
-      {
-        placeholder: 'Username',
-        onChangeText: (text) => handleNameUpdate(text, 2),
-      },
-      {
-        placeholder: 'Password',
-        onChangeText: handlePasswordUpdate,
-      },
-    ];
+    {
+      placeholder: 'First Name',
+      onChangeText: (text) => handleNameUpdate(text, 0),
+    },
+    {
+      placeholder: 'Last Name',
+      onChangeText: (text) => handleNameUpdate(text, 1),
+    },
+    {
+      placeholder: 'Phone',
+      onChangeText: handlePhoneUpdate,
+    },
+    {
+      placeholder: 'School Email',
+      onChangeText: handleEmailUpdate,
+    },
+    {
+      placeholder: 'Username',
+      onChangeText: (text) => handleNameUpdate(text, 2),
+    },
+    {
+      placeholder: 'Password',
+      onChangeText: handlePasswordUpdate,
+    },
+  ];
   const resetForm = (formStep: String) => {
     setValid(false);
     switch (formStep) {
@@ -259,6 +262,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
       setCurrentStep(currentStep + 1);
       setAttemptedSubmit(false);
       setValid(false);
+      setFadeValue(new Animated.Value(0));
     }
   };
   const advanceRegistration = async () => {
@@ -270,7 +274,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
       Alert.alert('Terms and conditions', ERROR_T_AND_C_NOT_ACCEPTED);
       return;
     }
-    const { fname, lname, phone, email, username, password } = form;
+    const {fname, lname, phone, email, username, password} = form;
     const response = await sendRegister(
       fname,
       lname,
@@ -281,7 +285,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
     );
     if (response) {
       const data = await response.json();
-      const { token, UserID } = data;
+      const {token, UserID} = data;
       switch (response.status) {
         case 201:
           await AsyncStorage.setItem('token', token);
@@ -321,8 +325,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
         <View style={styles.footer}>
           {currentStep !== 0 && currentStep !== 3 && (
             <ArrowButton
-            style = {styles.footer}
+              style={styles.footer}
               direction="backward"
+              onboarding={true}
               onPress={() => {
                 // if I go back do I want to reset the previous form?
                 setCurrentStep(currentStep - 1);
@@ -333,17 +338,17 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
           )}
         </View>
         {step.placeholder === 'Phone' && !isPhoneVerified ? (
-          <>
+          <Animated.View style={{opacity: fadeValue}}>
             <TaggInput
               maxLength={10} // currently only support US phone numbers
               accessibilityHint="Enter your phone number."
               accessibilityLabel="Phone number input field."
               placeholder="Phone Number"
               autoCompleteType="tel"
-              selectionColor='white'
+              selectionColor="white"
               textContentType="telephoneNumber"
               autoCapitalize="none"
-              externalStyles = {{
+              externalStyles={{
                 warning: styles.passWarning,
               }}
               keyboardType="number-pad"
@@ -362,13 +367,13 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
               buttonColor={'white'}
               labelColor={'blue'}
             />
-          </>
+          </Animated.View>
         ) : (
           <>
             {step.placeholder !== 'Password' ? (
               <>
                 <Text style={styles.formHeader}>SIGN UP</Text>
-                <View>
+                <Animated.View style={{opacity: fadeValue}}>
                   <TaggInput
                     key={step.placeholder}
                     style={styles.input}
@@ -379,12 +384,12 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                     autoCapitalize="words"
                     textContentType="name"
                     returnKeyType="done"
-                    selectionColor='white'
+                    selectionColor="white"
                     onChangeText={step.onChangeText}
                     onSubmitEditing={advance}
                     autoFocus={true}
                     blurOnSubmit={false}
-                    externalStyles = {{
+                    externalStyles={{
                       warning: styles.passWarning,
                     }}
                     valid={valid}
@@ -398,10 +403,10 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                     buttonColor={'white'}
                     labelColor={'blue'}
                   />
-                </View>
+                </Animated.View>
               </>
             ) : (
-              <>
+              <Animated.View style={{opacity: fadeValue}}>
                 <TaggInput
                   accessibilityHint="Enter a password."
                   accessibilityLabel="Password input field."
@@ -409,13 +414,13 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                   autoCompleteType="password"
                   textContentType="oneTimeCode"
                   returnKeyType="next"
-                  selectionColor='white'
+                  selectionColor="white"
                   onChangeText={handlePasswordUpdate}
                   onSubmitEditing={advanceRegistration}
                   blurOnSubmit={false}
                   secureTextEntry={!passVisibility}
                   valid={valid}
-                  externalStyles = {{
+                  externalStyles={{
                     warning: styles.passWarning,
                   }}
                   invalidWarning={
@@ -437,13 +442,13 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                   onChange={setTCAccepted}
                 />
                 <TaggSquareButton
-                    onPress={advanceRegistration}
-                    title={'Next'}
-                    buttonStyle={'normal'}
-                    buttonColor={'white'}
-                    labelColor={'blue'}
-                  />
-              </>
+                  onPress={advanceRegistration}
+                  title={'Next'}
+                  buttonStyle={'normal'}
+                  buttonColor={'white'}
+                  labelColor={'blue'}
+                />
+              </Animated.View>
             )}
           </>
         )}
@@ -476,7 +481,7 @@ const styles = StyleSheet.create({
     marginTop: 5,
     color: '#FF8989',
     maxWidth: 350,
-    alignSelf: 'flex-start'
+    alignSelf: 'flex-start',
   },
   input: {
     minWidth: '60%',
@@ -515,7 +520,8 @@ const styles = StyleSheet.create({
     marginVertical: '5%',
   },
   footer: {
-    width: '100%',
+    height: normalize(50),
+    width: normalize(50),
     flexDirection: 'row',
     justifyContent: 'space-around',
     ...Platform.select({