Tma119: Split Registration Screen (#23)

* split registration screen

* styling

* changed 4:2 to 3:3

* fade wizard with keyboard visibility

* added regex for first and last name

* accidentally saved videos in this folder

* shortened fade duration to 300ms

* add fade to Registration2

* rename RegistrationOne and RegistrationTwo

* moved keyboard logic into RegistrationWizard

* moved loading indicator out of the way

* moving loading to outside of keyboard avoiding view

* moved loading indicator up

Co-authored-by: Megan Hong <meganhong31@g.ucla.edu>

1 files changed, 48 insertions, 11 deletions

diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx
index 1157455f..31c3bbdf 100644
--- a/src/components/onboarding/RegistrationWizard.tsx
+++ b/src/components/onboarding/RegistrationWizard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {View, StyleSheet, ViewProps} from 'react-native';
+import {View, StyleSheet, ViewProps, Keyboard} from 'react-native';
+import * as Animatable from 'react-native-animatable';
 
 interface RegistrationWizardProps extends ViewProps {
   step: 'one' | 'two' | 'three' | 'four' | 'five';
@@ -8,17 +9,53 @@ interface RegistrationWizardProps extends ViewProps {
 const RegistrationWizard = (props: RegistrationWizardProps) => {
   const stepStyle = styles.step;
   const stepActiveStyle = [styles.step, styles.stepActive];
+
+  // detects visibility of keyboard to display or hide wizard
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+
+  Keyboard.addListener('keyboardDidShow', () => {
+    setKeyboardVisible(true);
+  });
+  Keyboard.addListener('keyboardDidHide', () => {
+    setKeyboardVisible(false);
+  });
+
   return (
     <View {...props}>
-      <View style={styles.container}>
-        <View style={props.step === 'one' ? stepActiveStyle : stepStyle} />
-        <View style={styles.progress} />
-        <View style={props.step === 'two' ? stepActiveStyle : stepStyle} />
-        <View style={styles.progress} />
-        <View style={props.step === 'three' ? stepActiveStyle : stepStyle} />
-        <View style={styles.progress} />
-        <View style={props.step === 'four' ? stepActiveStyle : stepStyle} />
-      </View>
+      {!keyboardVisible && (
+        <Animatable.View animation="fadeIn" duration={300}>
+          <View style={styles.container}>
+            <View style={props.step === 'one' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View style={props.step === 'two' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View
+              style={props.step === 'three' ? stepActiveStyle : stepStyle}
+            />
+            <View style={styles.progress} />
+            <View style={props.step === 'four' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View style={props.step === 'five' ? stepActiveStyle : stepStyle} />
+          </View>
+        </Animatable.View>
+      )}
+      {keyboardVisible && (
+        <Animatable.View animation="fadeOut" duration={300}>
+          <View style={styles.container}>
+            <View style={props.step === 'one' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View style={props.step === 'two' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View
+              style={props.step === 'three' ? stepActiveStyle : stepStyle}
+            />
+            <View style={styles.progress} />
+            <View style={props.step === 'four' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View style={props.step === 'five' ? stepActiveStyle : stepStyle} />
+          </View>
+        </Animatable.View>
+      )}
     </View>
   );
 };
@@ -40,7 +77,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#e1f0ff',
   },
   progress: {
-    width: '20%',
+    width: '16%',
     height: 2,
     backgroundColor: '#e1f0ff',
   },