[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

3 files changed, 31 insertions, 2 deletions

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