aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/onboarding/ArrowButton.tsx4
-rw-r--r--src/screens/onboarding/BasicInfoOnboarding.tsx216
-rw-r--r--src/screens/onboarding/PhoneVerification.tsx37
3 files changed, 143 insertions, 114 deletions
diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx
index 78dbab32..dcf559a8 100644
--- a/src/components/onboarding/ArrowButton.tsx
+++ b/src/components/onboarding/ArrowButton.tsx
@@ -38,8 +38,8 @@ const ArrowButton: React.FC<ArrowButtonProps> = (props) => {
const styles = StyleSheet.create({
image: {
- // width: '100%',
- // height: '100%',
+ width: '100%',
+ height: '100%',
},
});
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index 277331b2..2152ffb9 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -11,10 +11,9 @@ import {
StyleSheet,
Text,
TouchableOpacity,
- View,
} from 'react-native';
import {normalize} from 'react-native-elements';
-import Animated, {Easing} from 'react-native-reanimated';
+import Animated, {Easing, useValue} from 'react-native-reanimated';
import {
ArrowButton,
Background,
@@ -41,7 +40,7 @@ import {
import {OnboardingStackParams} from '../../routes';
import {sendOtpStatusCode, sendRegister} from '../../services';
import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
type BasicInfoOnboardingRouteProp = RouteProp<
OnboardingStackParams,
@@ -68,6 +67,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
new Animated.Value(0),
);
+ const fadeButtonValue = useValue<number>(0);
const [form, setForm] = useState({
fname: '',
lname: '',
@@ -77,19 +77,38 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
password: '',
});
- const fadeComponentIn = async () => {
- Animated.timing(fadeValue, {
- toValue: 1,
- duration: 1000,
+ const fadeFormIn = () => {
+ setFadeValue(new Animated.Value(0));
+ };
+
+ const fadeButtonTo = (target: number) => {
+ Animated.timing(fadeButtonValue, {
+ toValue: target,
+ duration: 100,
easing: Easing.linear,
}).start();
};
useEffect(() => {
- fadeComponentIn();
+ const fade = async () => {
+ Animated.timing(fadeValue, {
+ toValue: 1,
+ duration: 1000,
+ easing: Easing.linear,
+ }).start();
+ };
+ fade();
}, [fadeValue]);
- const goNext = async () => {
+ useEffect(() => {
+ if (valid) {
+ fadeButtonTo(1);
+ } else {
+ fadeButtonTo(0);
+ }
+ }, [valid]);
+
+ const goToPhoneVerification = async () => {
if (!attemptedSubmit) {
setAttemptedSubmit(true);
}
@@ -262,7 +281,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
setCurrentStep(currentStep + 1);
setAttemptedSubmit(false);
setValid(false);
- setFadeValue(new Animated.Value(0));
+ fadeFormIn();
}
};
const advanceRegistration = async () => {
@@ -317,63 +336,70 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
style={styles.container}
gradientType={BackgroundGradientType.Light}>
<StatusBar barStyle="light-content" />
- {/* getting rid of registration progress in onboarding*/}
- {/* <RegistrationWizard style={styles.wizard} step="one" /> */}
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+ keyboardVerticalOffset={-(SCREEN_HEIGHT * 0.2)}
style={styles.container}>
- <View style={styles.footer}>
- {currentStep !== 0 && currentStep !== 3 && (
- <ArrowButton
- style={styles.footer}
- direction="backward"
- onboarding={true}
- onPress={() => {
- // if I go back do I want to reset the previous form?
- setCurrentStep(currentStep - 1);
- resetForm(step.placeholder);
- setAttemptedSubmit(false);
- }}
- />
- )}
- </View>
+ {currentStep !== 0 && currentStep !== 3 && (
+ <ArrowButton
+ style={styles.backArrow}
+ direction="backward"
+ onboarding={true}
+ onPress={() => {
+ // if I go back do I want to reset the previous form?
+ setCurrentStep(currentStep - 1);
+ resetForm(step.placeholder);
+ setAttemptedSubmit(false);
+ setFadeValue(new Animated.Value(0));
+ }}
+ />
+ )}
{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"
- textContentType="telephoneNumber"
- autoCapitalize="none"
- externalStyles={{
- warning: styles.passWarning,
- }}
- keyboardType="number-pad"
- onChangeText={handlePhoneUpdate}
- autoFocus={true}
- blurOnSubmit={false}
- valid={valid}
- invalidWarning={'Please enter a valid 10 digit number.'}
- attemptedSubmit={attemptedSubmit}
- onSubmitEditing={goNext}
- />
- <TaggSquareButton
- onPress={goNext}
- title={'Verify'}
- buttonStyle={'normal'}
- buttonColor={'white'}
- labelColor={'blue'}
- />
- </Animated.View>
+ <>
+ <Animated.Text style={[styles.formHeader, {opacity: fadeValue}]}>
+ PHONE NUMBER
+ </Animated.Text>
+ <Animated.View style={[styles.formContainer, {opacity: fadeValue}]}>
+ <TaggInput
+ style={styles.input}
+ 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"
+ textContentType="telephoneNumber"
+ autoCapitalize="none"
+ externalStyles={{
+ warning: styles.passWarning,
+ }}
+ keyboardType="number-pad"
+ onChangeText={handlePhoneUpdate}
+ autoFocus={true}
+ blurOnSubmit={false}
+ valid={valid}
+ invalidWarning={'Please enter a valid 10 digit number.'}
+ attemptedSubmit={attemptedSubmit}
+ onSubmitEditing={goToPhoneVerification}
+ />
+ <Animated.View style={{opacity: fadeButtonValue}}>
+ <TaggSquareButton
+ onPress={goToPhoneVerification}
+ title={'Verify'}
+ buttonStyle={'normal'}
+ buttonColor={'white'}
+ labelColor={'blue'}
+ />
+ </Animated.View>
+ </Animated.View>
+ </>
) : (
<>
{step.placeholder !== 'Password' ? (
<>
<Text style={styles.formHeader}>SIGN UP</Text>
- <Animated.View style={{opacity: fadeValue}}>
+ <Animated.View
+ style={[styles.formContainer, {opacity: fadeValue}]}>
<TaggInput
key={step.placeholder}
style={styles.input}
@@ -396,17 +422,20 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`}
attemptedSubmit={attemptedSubmit}
/>
- <TaggSquareButton
- onPress={advance}
- title={'Next'}
- buttonStyle={'normal'}
- buttonColor={'white'}
- labelColor={'blue'}
- />
+ <Animated.View style={{opacity: fadeButtonValue}}>
+ <TaggSquareButton
+ onPress={advance}
+ title={'Next'}
+ buttonStyle={'normal'}
+ buttonColor={'white'}
+ labelColor={'blue'}
+ />
+ </Animated.View>
</Animated.View>
</>
) : (
- <Animated.View style={{opacity: fadeValue}}>
+ <Animated.View
+ style={[styles.formContainer, {opacity: fadeValue}]}>
<TaggInput
accessibilityHint="Enter a password."
accessibilityLabel="Password input field."
@@ -432,6 +461,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
<TouchableOpacity
accessibilityLabel="Show password button"
accessibilityHint="Select this if you want to display your tagg password"
+ style={styles.showPassContainer}
onPress={() => setPassVisibility(!passVisibility)}>
<Text style={styles.showPass}>Show Password</Text>
</TouchableOpacity>
@@ -441,13 +471,15 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
accepted={tcAccepted}
onChange={setTCAccepted}
/>
- <TaggSquareButton
- onPress={advanceRegistration}
- title={'Next'}
- buttonStyle={'normal'}
- buttonColor={'white'}
- labelColor={'blue'}
- />
+ <Animated.View style={{opacity: fadeButtonValue}}>
+ <TaggSquareButton
+ onPress={advanceRegistration}
+ title={'Next'}
+ buttonStyle={'normal'}
+ buttonColor={'white'}
+ labelColor={'blue'}
+ />
+ </Animated.View>
</Animated.View>
)}
</>
@@ -464,18 +496,27 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
+ formContainer: {
+ marginTop: '20%',
+ height: SCREEN_HEIGHT * 0.2,
+ width: '80%',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
arrow: {
color: '#6EE7E7',
},
- showPass: {
- color: 'white',
+ showPassContainer: {
marginVertical: '1%',
borderBottomWidth: 1,
paddingBottom: '1%',
- left: '-18%',
+ alignSelf: 'flex-start',
borderBottomColor: 'white',
marginBottom: '8%',
},
+ showPass: {
+ color: 'white',
+ },
passWarning: {
fontSize: 14,
marginTop: 5,
@@ -484,7 +525,7 @@ const styles = StyleSheet.create({
alignSelf: 'flex-start',
},
input: {
- minWidth: '60%',
+ minWidth: '100%',
height: 40,
fontSize: 16,
fontWeight: '600',
@@ -511,7 +552,7 @@ const styles = StyleSheet.create({
fontSize: 30,
fontWeight: '600',
position: 'absolute',
- top: '20%',
+ top: SCREEN_HEIGHT * 0.15,
},
load: {
top: '5%',
@@ -519,19 +560,12 @@ const styles = StyleSheet.create({
tc: {
marginVertical: '5%',
},
- footer: {
- height: normalize(50),
- width: normalize(50),
- flexDirection: 'row',
- justifyContent: 'space-around',
- ...Platform.select({
- ios: {
- bottom: '20%',
- },
- android: {
- bottom: '10%',
- },
- }),
+ backArrow: {
+ width: normalize(29),
+ height: normalize(25),
+ position: 'absolute',
+ top: HeaderHeight * 1.5,
+ left: 20,
},
});
export default BasicInfoOnboarding;
diff --git a/src/screens/onboarding/PhoneVerification.tsx b/src/screens/onboarding/PhoneVerification.tsx
index 93ae8fdc..7d9a04d8 100644
--- a/src/screens/onboarding/PhoneVerification.tsx
+++ b/src/screens/onboarding/PhoneVerification.tsx
@@ -4,7 +4,6 @@ import React, {useMemo} from 'react';
import {
Alert,
KeyboardAvoidingView,
- Platform,
StyleSheet,
TouchableOpacity,
View,
@@ -16,6 +15,7 @@ import {
useBlurOnFulfill,
useClearByFocusCell,
} from 'react-native-confirmation-code-field';
+import {normalize} from 'react-native-elements';
import {trackPromise} from 'react-promise-tracker';
import {
ArrowButton,
@@ -31,6 +31,7 @@ import {
import {OnboardingStackParams} from '../../routes';
import {sendOtp, verifyOtp} from '../../services';
import {BackgroundGradientType} from '../../types';
+import {HeaderHeight} from '../../utils';
type PhoneVerificationRouteProp = RouteProp<
OnboardingStackParams,
@@ -75,14 +76,14 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({
const footer = useMemo(
() => (
- <View style={styles.footer}>
- <ArrowButton
- direction="backward"
- onPress={() =>
- navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false})
- }
- />
- </View>
+ <ArrowButton
+ style={styles.backArrow}
+ direction="backward"
+ onboarding={true}
+ onPress={() =>
+ navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false})
+ }
+ />
),
[],
);
@@ -201,18 +202,12 @@ const styles = StyleSheet.create({
loadingIndicator: {
marginVertical: '5%',
},
- footer: {
- width: '100%',
- flexDirection: 'row',
- justifyContent: 'space-around',
- ...Platform.select({
- ios: {
- bottom: '20%',
- },
- android: {
- bottom: '10%',
- },
- }),
+ backArrow: {
+ width: normalize(29),
+ height: normalize(25),
+ position: 'absolute',
+ top: HeaderHeight * 1.5,
+ left: 20,
},
});
export default PhoneVerification;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:15:02 +0000