From 854a7d8f8526e8142c416ec41682468e87bcbbd2 Mon Sep 17 00:00:00 2001
From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>
Date: Tue, 13 Oct 2020 10:24:59 -0700
Subject: [TMA - 238] Added invitation code verification screen as the first
 onboarding screen (#46)

* Added invitation code verification screen as the first onboarding screen

* Changed screen order on some screens and a quick check on back navigation
---
 src/components/common/LoadingIndicator.tsx       | 24 ++++++++++++++++++++++++
 src/components/common/index.ts                   |  1 +
 src/components/onboarding/RegistrationWizard.tsx |  8 ++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/LoadingIndicator.tsx

(limited to 'src/components')

diff --git a/src/components/common/LoadingIndicator.tsx b/src/components/common/LoadingIndicator.tsx
new file mode 100644
index 00000000..f6679556
--- /dev/null
+++ b/src/components/common/LoadingIndicator.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {ActivityIndicator, StyleSheet} from 'react-native';
+import {usePromiseTracker} from 'react-promise-tracker';
+
+const LoadingIndicator: React.FC = () => {
+  const {promiseInProgress} = usePromiseTracker();
+  return promiseInProgress ? (
+    <ActivityIndicator
+      style={styles.loadingIndicator}
+      size="large"
+      color="#fff"
+    />
+  ) : (
+    <></>
+  );
+};
+
+const styles = StyleSheet.create({
+  loadingIndicator: {
+    marginVertical: '5%',
+  },
+});
+
+export default LoadingIndicator;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 4a226c8f..cb9d641b 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -7,4 +7,5 @@ export {default as GradientBackground} from './GradientBackground';
 export {default as SocialIcon} from './SocialIcon';
 export {default as TabsGradient} from './TabsGradient';
 export {default as RecentSearches} from '../search/RecentSearches';
+export {default as LoadingIndicator} from './LoadingIndicator';
 export * from './post';
diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx
index 0094c8af..8d747b01 100644
--- a/src/components/onboarding/RegistrationWizard.tsx
+++ b/src/components/onboarding/RegistrationWizard.tsx
@@ -3,7 +3,7 @@ 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';
+  step: 'one' | 'two' | 'three' | 'four' | 'five' | 'six';
 }
 
 const RegistrationWizard = (props: RegistrationWizardProps) => {
@@ -41,6 +41,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => {
             <View style={props.step === 'four' ? stepActiveStyle : stepStyle} />
             <View style={styles.progress} />
             <View style={props.step === 'five' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View style={props.step === 'six' ? stepActiveStyle : stepStyle} />
           </View>
         </Animatable.View>
       )}
@@ -58,6 +60,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => {
             <View style={props.step === 'four' ? stepActiveStyle : stepStyle} />
             <View style={styles.progress} />
             <View style={props.step === 'five' ? stepActiveStyle : stepStyle} />
+            <View style={styles.progress} />
+            <View style={props.step === 'six' ? stepActiveStyle : stepStyle} />
           </View>
         </Animatable.View>
       )}
@@ -82,7 +86,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#e1f0ff',
   },
   progress: {
-    width: '16%',
+    width: '13%',
     height: 2,
     backgroundColor: '#e1f0ff',
   },
-- 
cgit v1.2.3-70-g09d2