aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/screens/onboarding/BasicInfoOnboarding.tsx156
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({
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:24:53 +0000