added invalid styles

1 files changed, 20 insertions, 4 deletions

diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index 25a48985..3fa33f63 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -363,7 +363,11 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
             </Animated.Text>
             <Animated.View style={[styles.formContainer, {opacity: fadeValue}]}>
               <TaggInput
-                style={styles.input}
+                style={
+                  attemptedSubmit && !valid
+                    ? [styles.input, styles.invalidColor]
+                    : styles.input
+                }
                 maxLength={10} // currently only support US phone numbers
                 accessibilityHint="Enter your phone number."
                 accessibilityLabel="Phone number input field."
@@ -403,7 +407,11 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
                   style={[styles.formContainer, {opacity: fadeValue}]}>
                   <TaggInput
                     key={step.placeholder}
-                    style={styles.input}
+                    style={
+                      attemptedSubmit && !valid
+                        ? [styles.input, styles.invalidColor]
+                        : styles.input
+                    }
                     accessibilityHint={`Enter your ${step.placeholder.toLowerCase()}`}
                     accessibilityLabel={`${step.placeholder} input field.`}
                     placeholder={step.placeholder}
@@ -443,11 +451,12 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
                   placeholder="Password"
                   autoCompleteType="password"
                   textContentType="oneTimeCode"
-                  returnKeyType="next"
+                  returnKeyType="done"
                   selectionColor="white"
                   onChangeText={handlePasswordUpdate}
                   onSubmitEditing={advanceRegistration}
                   blurOnSubmit={false}
+                  autoFocus={true}
                   secureTextEntry={!passVisibility}
                   valid={valid}
                   externalStyles={{
@@ -457,7 +466,11 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
                     'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.'
                   }
                   attemptedSubmit={attemptedSubmit}
-                  style={styles.input}
+                  style={
+                    attemptedSubmit && !valid
+                      ? [styles.input, styles.invalidColor]
+                      : styles.input
+                  }
                 />
                 <TouchableOpacity
                   accessibilityLabel="Show password button"
@@ -534,6 +547,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#fff',
   },
+  invalidColor: {
+    color: '#FF8989',
+  },
   errorInput: {
     minWidth: '60%',
     height: 40,