added new Arrow, working on transition animation

3 files changed, 43 insertions, 8 deletions

diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx
index bf07c6ac..57ebc774 100644
--- a/src/components/onboarding/ArrowButton.tsx
+++ b/src/components/onboarding/ArrowButton.tsx
@@ -4,6 +4,7 @@ import {Image, TouchableOpacity, TouchableOpacityProps} from 'react-native';
 interface ArrowButtonProps extends TouchableOpacityProps {
   direction: 'forward' | 'backward';
   disabled?: boolean;
+  onboarding?: boolean
 }
 const ArrowButton: React.FC<ArrowButtonProps> = (props: ArrowButtonProps) => {
   const arrow =
@@ -11,7 +12,9 @@ const ArrowButton: React.FC<ArrowButtonProps> = (props: ArrowButtonProps) => {
       ? props.disabled
         ? require('../../assets/images/arrow-forward-disabled.png')
         : require('../../assets/images/arrow-forward-enabled.png')
-      : require('../../assets/images/arrow-backward.png');
+      : require('../../assets/images/arrow-backward.png')
+      ? props.onboarding
+      : require ('../../assets/images/onboarding-arrow.png')
 
   return (
     <TouchableOpacity {...props}>
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
index 657ce822..d52117b0 100644
--- a/src/components/onboarding/TaggInput.tsx
+++ b/src/components/onboarding/TaggInput.tsx
@@ -16,7 +16,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
   return (
     <View style={styles.container}>
       <TextInput
-        style={styles.input}
+        style={[styles.input, props.externalStyles?.inputWarning]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index 88736340..e53411ae 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -2,7 +2,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 React, { useEffect, useState } from 'react';
+import { defineLocale } from 'moment';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Alert,
   KeyboardAvoidingView,
@@ -13,6 +14,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { createAnimatableComponent } from 'react-native-animatable';
+import Animated from 'react-native-reanimated';
 import {
   ArrowButton,
   Background,
@@ -63,6 +66,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
   const [tcAccepted, setTCAccepted] = useState(false);
   const [passVisibility, setPassVisibility] = useState(false);
   const [autoCapitalize, setAutoCap] = useState('None')
+  const [fadeIn, setFadeIn] = useState(new Animated.Value(0))
   const [form, setForm] = useState({
     fname: '',
     lname: '',
@@ -71,6 +75,15 @@ 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 goNext = async () => {
     if (!attemptedSubmit) {
@@ -308,6 +321,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
         <View style={styles.footer}>
           {currentStep !== 0 && currentStep !== 3 && (
             <ArrowButton
+            style = {styles.footer}
               direction="backward"
               onPress={() => {
                 // if I go back do I want to reset the previous form?
@@ -330,7 +344,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
               textContentType="telephoneNumber"
               autoCapitalize="none"
               externalStyles = {{
-                warning: styles.passWarning
+                warning: styles.passWarning,
               }}
               keyboardType="number-pad"
               onChangeText={handlePhoneUpdate}
@@ -371,7 +385,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                     autoFocus={true}
                     blurOnSubmit={false}
                     externalStyles = {{
-                      warning: styles.passWarning
+                      warning: styles.passWarning,
                     }}
                     valid={valid}
                     invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`}
@@ -401,6 +415,9 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                   blurOnSubmit={false}
                   secureTextEntry={!passVisibility}
                   valid={valid}
+                  externalStyles = {{
+                    warning: styles.passWarning,
+                  }}
                   invalidWarning={
                     'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.'
                   }
@@ -419,6 +436,13 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({ route }) => {
                   accepted={tcAccepted}
                   onChange={setTCAccepted}
                 />
+                <TaggSquareButton
+                    onPress={advanceRegistration}
+                    title={'Next'}
+                    buttonStyle={'normal'}
+                    buttonColor={'white'}
+                    labelColor={'blue'}
+                  />
               </>
             )}
           </>
@@ -440,18 +464,17 @@ const styles = StyleSheet.create({
   },
   showPass: {
     color: 'white',
-    alignSelf: 'flex-start',
     marginVertical: '1%',
     borderBottomWidth: 1,
     paddingBottom: '1%',
-    left: '3%',
+    left: '-18%',
     borderBottomColor: 'white',
     marginBottom: '8%',
   },
   passWarning: {
     fontSize: 14,
     marginTop: 5,
-    color: 'red',
+    color: '#FF8989',
     maxWidth: 350,
     alignSelf: 'flex-start'
   },
@@ -464,6 +487,15 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#fff',
   },
+  errorInput: {
+    minWidth: '60%',
+    height: 40,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FF8989',
+    borderBottomWidth: 1,
+    borderBottomColor: '#fff',
+  },
   button: {
     alignItems: 'center',
     width: 40,