From f1300739189283929cb20a22e5281388d1bbeafc Mon Sep 17 00:00:00 2001
From: meganhong <34787696+meganhong@users.noreply.github.com>
Date: Tue, 21 Jul 2020 09:51:47 -0700
Subject: 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>
---
 src/components/onboarding/RegistrationWizard.tsx | 59 +++++++++++++++++++-----
 1 file changed, 48 insertions(+), 11 deletions(-)

(limited to 'src/components')

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',
   },
-- 
cgit v1.2.3-70-g09d2