From 14bc026d21e4ee9692ddbea4343b2c57c6e3cab4 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 6 May 2021 20:34:25 -0700 Subject: onboarding part 1 and 2 done, need to register and style --- src/components/onboarding/TermsConditions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/onboarding/TermsConditions.tsx b/src/components/onboarding/TermsConditions.tsx index 08cd8228..9bd0ee3b 100644 --- a/src/components/onboarding/TermsConditions.tsx +++ b/src/components/onboarding/TermsConditions.tsx @@ -49,11 +49,11 @@ const TermsConditions: React.FC = (props) => { - I accept the + Accept setModalVisible(true)}> - EULA & Terms of Service + Terms and Conditions -- cgit v1.2.3-70-g09d2 From 1b385f90bc767429971d1748299f33ac542fe429 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Fri, 7 May 2021 13:11:21 -0700 Subject: updated TaggInput to take externalStyles and updated error message color in onboarding --- src/components/onboarding/TaggInput.tsx | 5 +- src/screens/onboarding/BasicInfoOnboarding.tsx | 124 ++++++++++++++++--------- 2 files changed, 83 insertions(+), 46 deletions(-) (limited to 'src/components') diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx index 405564ab..657ce822 100644 --- a/src/components/onboarding/TaggInput.tsx +++ b/src/components/onboarding/TaggInput.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {View, TextInput, StyleSheet, TextInputProps} from 'react-native'; +import {View, TextInput, StyleSheet, TextInputProps, ViewStyle, StyleProp} from 'react-native'; import * as Animatable from 'react-native-animatable'; import {TAGG_LIGHT_PURPLE} from '../../constants'; @@ -7,6 +7,7 @@ interface TaggInputProps extends TextInputProps { valid?: boolean; invalidWarning?: string; attemptedSubmit?: boolean; + externalStyles?: Record> } /** * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. @@ -25,7 +26,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => { + style={[styles.warning, props.externalStyles?.warning]}> {props.invalidWarning} )} diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx index 103abc5c..88736340 100644 --- a/src/screens/onboarding/BasicInfoOnboarding.tsx +++ b/src/screens/onboarding/BasicInfoOnboarding.tsx @@ -1,8 +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 React, {useEffect, 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, @@ -36,10 +36,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, @@ -54,14 +54,15 @@ interface BasicInfoOnboardingProps { navigation: BasicInfoOnboardingNavigationProp; } -const BasicInfoOnboarding: React.FC = ({route}) => { - const {isPhoneVerified} = route.params; +const BasicInfoOnboarding: React.FC = ({ 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 [form, setForm] = useState({ fname: '', lname: '', @@ -77,12 +78,13 @@ const BasicInfoOnboarding: React.FC = ({route}) => { } try { if (valid) { - const {phone} = form; - const code = await sendOtpStatusCode(phone); + const { phone } = form; + const code = 200; + //await sendOtpStatusCode(phone); if (code) { switch (code) { case 200: - const {fname, lname} = form; + const { fname, lname } = form; navigation.navigate('PhoneVerification', { firstName: fname, lastName: lname, @@ -120,6 +122,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { ...form, fname: name, }); + setAutoCap('words'); setValid(isValidName); break; case 1: @@ -127,6 +130,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { ...form, lname: name, }); + setAutoCap('words'); setValid(isValidName); break; case 2: @@ -135,6 +139,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { username: name, }); setValid(usernameRegex.test(name)); + setAutoCap('None'); break; } }; @@ -144,6 +149,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { ...form, phone, }); + setAutoCap('None'); setValid(phoneRegex.test(phone)); }; const handleEmailUpdate = (email: string) => { @@ -152,6 +158,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { ...form, email, }); + setAutoCap('None'); setValid(emailRegex.test(email)); }; const handlePasswordUpdate = (password: string) => { @@ -159,37 +166,38 @@ const BasicInfoOnboarding: React.FC = ({route}) => { ...form, password, }); + setAutoCap('None'); setValid(passwordRegex.test(password)); }; const formSteps: { 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) { @@ -249,7 +257,7 @@ const BasicInfoOnboarding: React.FC = ({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, @@ -260,7 +268,7 @@ const BasicInfoOnboarding: React.FC = ({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,6 +329,9 @@ const BasicInfoOnboarding: React.FC = ({route}) => { selectionColor='white' textContentType="telephoneNumber" autoCapitalize="none" + externalStyles = {{ + warning: styles.passWarning + }} keyboardType="number-pad" onChangeText={handlePhoneUpdate} autoFocus={true} @@ -349,9 +360,9 @@ const BasicInfoOnboarding: React.FC = ({route}) => { style={styles.input} accessibilityHint={`Enter your ${step.placeholder.toLowerCase()}`} accessibilityLabel={`${step.placeholder} input field.`} - placeholder={currentStep + ' ' + step.placeholder} + placeholder={step.placeholder} autoCompleteType="name" - autoCapitalize="none" + autoCapitalize="words" textContentType="name" returnKeyType="done" selectionColor='white' @@ -359,6 +370,9 @@ const BasicInfoOnboarding: React.FC = ({route}) => { onSubmitEditing={advance} autoFocus={true} blurOnSubmit={false} + externalStyles = {{ + warning: styles.passWarning + }} valid={valid} invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`} attemptedSubmit={attemptedSubmit} @@ -394,8 +408,10 @@ const BasicInfoOnboarding: React.FC = ({route}) => { style={styles.input} /> setPassVisibility(!passVisibility)}> - Show Password + Show Password Date: Fri, 7 May 2021 13:53:58 -0700 Subject: added new Arrow, working on transition animation --- src/components/onboarding/ArrowButton.tsx | 5 ++- src/components/onboarding/TaggInput.tsx | 2 +- src/screens/onboarding/BasicInfoOnboarding.tsx | 44 ++++++++++++++++++++++---- 3 files changed, 43 insertions(+), 8 deletions(-) (limited to 'src/components') 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 = (props: ArrowButtonProps) => { const arrow = @@ -11,7 +12,9 @@ const ArrowButton: React.FC = (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 ( 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 ( = ({ 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 = ({ 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 = ({ route }) => { {currentStep !== 0 && currentStep !== 3 && ( { // if I go back do I want to reset the previous form? @@ -330,7 +344,7 @@ const BasicInfoOnboarding: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ route }) => { accepted={tcAccepted} onChange={setTCAccepted} /> + )} @@ -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, -- cgit v1.2.3-70-g09d2 From 8c20f573c29e9e42046aeeefbc786ca30aa74e68 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 7 May 2021 19:06:53 -0400 Subject: added arrow button asset --- src/assets/images/onboarding-arrow.png | Bin 385 -> 0 bytes src/assets/images/onboarding-backarrow.png | Bin 0 -> 2036 bytes src/components/onboarding/ArrowButton.tsx | 44 +++++++++++++++++++++-------- src/components/onboarding/TaggInput.tsx | 11 ++++++-- 4 files changed, 41 insertions(+), 14 deletions(-) delete mode 100644 src/assets/images/onboarding-arrow.png create mode 100644 src/assets/images/onboarding-backarrow.png (limited to 'src/components') diff --git a/src/assets/images/onboarding-arrow.png b/src/assets/images/onboarding-arrow.png deleted file mode 100644 index 8cca6502..00000000 Binary files a/src/assets/images/onboarding-arrow.png and /dev/null differ diff --git a/src/assets/images/onboarding-backarrow.png b/src/assets/images/onboarding-backarrow.png new file mode 100644 index 00000000..9aaa66cb Binary files /dev/null and b/src/assets/images/onboarding-backarrow.png differ diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx index 57ebc774..78dbab32 100644 --- a/src/components/onboarding/ArrowButton.tsx +++ b/src/components/onboarding/ArrowButton.tsx @@ -1,26 +1,46 @@ import React from 'react'; -import {Image, TouchableOpacity, TouchableOpacityProps} from 'react-native'; +import { + Image, + StyleSheet, + TouchableOpacity, + TouchableOpacityProps, +} from 'react-native'; interface ArrowButtonProps extends TouchableOpacityProps { direction: 'forward' | 'backward'; disabled?: boolean; - onboarding?: boolean + onboarding?: boolean; } -const ArrowButton: React.FC = (props: ArrowButtonProps) => { - const arrow = - props.direction === 'forward' - ? props.disabled - ? require('../../assets/images/arrow-forward-disabled.png') - : require('../../assets/images/arrow-forward-enabled.png') - : require('../../assets/images/arrow-backward.png') - ? props.onboarding - : require ('../../assets/images/onboarding-arrow.png') +const ArrowButton: React.FC = (props) => { + const {direction, disabled, onboarding} = props; + let uri; + + if (direction === 'forward') { + if (disabled) { + uri = require('../../assets/images/arrow-forward-disabled.png'); + } else { + uri = require('../../assets/images/arrow-forward-enabled.png'); + } + } else { + if (onboarding) { + uri = require('../../assets/images/onboarding-backarrow.png'); + } else { + uri = require('../../assets/images/arrow-backward.png'); + } + } return ( - + ); }; +const styles = StyleSheet.create({ + image: { + // width: '100%', + // height: '100%', + }, +}); + export default ArrowButton; diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx index d52117b0..297392e5 100644 --- a/src/components/onboarding/TaggInput.tsx +++ b/src/components/onboarding/TaggInput.tsx @@ -1,5 +1,12 @@ import React from 'react'; -import {View, TextInput, StyleSheet, TextInputProps, ViewStyle, StyleProp} from 'react-native'; +import { + View, + TextInput, + StyleSheet, + TextInputProps, + ViewStyle, + StyleProp, +} from 'react-native'; import * as Animatable from 'react-native-animatable'; import {TAGG_LIGHT_PURPLE} from '../../constants'; @@ -7,7 +14,7 @@ interface TaggInputProps extends TextInputProps { valid?: boolean; invalidWarning?: string; attemptedSubmit?: boolean; - externalStyles?: Record> + externalStyles?: Record>; } /** * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. -- cgit v1.2.3-70-g09d2 From 67981afac39be67de4fcae97826cee435ab1dc29 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 7 May 2021 19:17:37 -0400 Subject: updated styling --- src/components/onboarding/ArrowButton.tsx | 4 +- src/screens/onboarding/BasicInfoOnboarding.tsx | 216 ++++++++++++++----------- src/screens/onboarding/PhoneVerification.tsx | 37 ++--- 3 files changed, 143 insertions(+), 114 deletions(-) (limited to 'src/components') 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 = (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 = ({route}) => { const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); + const fadeButtonValue = useValue(0); const [form, setForm] = useState({ fname: '', lname: '', @@ -77,19 +77,38 @@ const BasicInfoOnboarding: React.FC = ({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 = ({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 = ({route}) => { style={styles.container} gradientType={BackgroundGradientType.Light}> - {/* getting rid of registration progress in onboarding*/} - {/* */} - - {currentStep !== 0 && currentStep !== 3 && ( - { - // if I go back do I want to reset the previous form? - setCurrentStep(currentStep - 1); - resetForm(step.placeholder); - setAttemptedSubmit(false); - }} - /> - )} - + {currentStep !== 0 && currentStep !== 3 && ( + { + // 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 ? ( - - - - + <> + + PHONE NUMBER + + + + + + + + ) : ( <> {step.placeholder !== 'Password' ? ( <> SIGN UP - + = ({route}) => { invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`} attemptedSubmit={attemptedSubmit} /> - + + + ) : ( - + = ({route}) => { setPassVisibility(!passVisibility)}> Show Password @@ -441,13 +471,15 @@ const BasicInfoOnboarding: React.FC = ({route}) => { accepted={tcAccepted} onChange={setTCAccepted} /> - + + + )} @@ -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 = ({ const footer = useMemo( () => ( - - - navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false}) - } - /> - + + 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; -- cgit v1.2.3-70-g09d2 From 525678fde244e8e9d3ea373ee8fb93c26ea92be8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 7 May 2021 20:09:57 -0400 Subject: added default for arrowbutton --- src/components/onboarding/ArrowButton.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx index dcf559a8..67fd0f62 100644 --- a/src/components/onboarding/ArrowButton.tsx +++ b/src/components/onboarding/ArrowButton.tsx @@ -5,6 +5,7 @@ import { TouchableOpacity, TouchableOpacityProps, } from 'react-native'; +import {normalize} from '../../utils'; interface ArrowButtonProps extends TouchableOpacityProps { direction: 'forward' | 'backward'; @@ -30,7 +31,7 @@ const ArrowButton: React.FC = (props) => { } return ( - + ); @@ -41,6 +42,10 @@ const styles = StyleSheet.create({ width: '100%', height: '100%', }, + defautSize: { + width: normalize(29), + height: normalize(25), + }, }); export default ArrowButton; -- cgit v1.2.3-70-g09d2