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',
   },