[TMA 446] Create category (#144)

* Added welcome page

* Working code

* Small fix

* Some more cleanup

* Fixes

* Cleanup

* Fix again

* Use gradient for white bg as well

* Fixed type

15 files changed, 417 insertions, 36 deletions

diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx
new file mode 100644
index 00000000..f92b7e39
--- /dev/null
+++ b/src/screens/onboarding/CategorySelection.tsx
@@ -0,0 +1,241 @@
+import {RouteProp} from '@react-navigation/native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useDispatch} from 'react-redux';
+import {
+  BackgroundGradientType,
+  CategorySelectionScreenType,
+  MomentCategoryType,
+} from '../../types';
+import {Background, MomentCategory} from '../../components';
+import {MOMENT_CATEGORIES} from '../../constants';
+import {OnboardingStackParams} from '../../routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {getTokenOrLogout, userLogin} from '../../utils';
+import {postMomentCategories} from '../../services';
+import {updateMomentCategories} from '../../store/actions/momentCategories';
+import {ScrollView} from 'react-native-gesture-handler';
+
+type CategorySelectionRouteProps = RouteProp<
+  OnboardingStackParams,
+  'CategorySelection'
+>;
+
+type CategorySelectionNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'CategorySelection'
+>;
+
+interface CategorySelectionProps {
+  route: CategorySelectionRouteProps;
+  navigation: CategorySelectionNavigationProps;
+}
+
+const CategorySelection: React.FC<CategorySelectionProps> = ({
+  route,
+  navigation,
+}) => {
+  /**
+   * Same component to be used for category selection while onboarding and while on profile
+   */
+  const {categories, screenType, user} = route.params;
+  const isOnBoarding: boolean =
+    screenType === CategorySelectionScreenType.Onboarding;
+  const {userId, username} = user;
+
+  const [selectedCategories, setSelectedCategories] = useState<
+    Array<MomentCategoryType>
+  >([]);
+
+  const dispatch = useDispatch();
+
+  /**
+   * Show the tutorial if a new user is OnBoarding
+   */
+  useEffect(() => {
+    if (isOnBoarding) {
+      navigation.navigate('TaggPopup', {
+        popupProps: {
+          messageHeader: 'Category And Moments',
+          messageBody:
+            'Use pictures and videos to share different aspects of you',
+          next: {
+            messageHeader: 'Select Categories',
+            messageBody:
+              'Select between 2 - 6 categories to begin creating moments!',
+            next: undefined,
+          },
+        },
+      });
+    }
+  }, [isOnBoarding]);
+
+  /**
+   * Handle selection of a new category
+   * case isAdded:
+   *    Return without doing anything
+   * case isSelected:
+   *    Add to the selected categories
+   * case not isSelected:
+   *    Remove from the selected categories
+   */
+  const onSelect = (
+    category: MomentCategoryType,
+    isSelected: boolean,
+    isAdded: boolean,
+  ) => {
+    if (isAdded) return;
+    if (isSelected) {
+      setSelectedCategories((prev) => [...prev, category]);
+    } else {
+      setSelectedCategories(
+        selectedCategories.filter((item) => item !== category),
+      );
+    }
+  };
+
+  /**
+   * if onboarding
+   *    Count of already added categories will always be 0
+   * else
+   *    Calculate number of selected categories by iterating through the user's pre-selected categories
+   */
+  const addedLength = !isOnBoarding
+    ? Object.keys(categories).filter((key) => {
+        return categories[key as MomentCategoryType] === true;
+      }).length
+    : 0;
+
+  const handleButtonPress = async () => {
+    /**
+     * Check for lower and upper bound before creating new categories
+     */
+    const totalCategories = addedLength + selectedCategories.length;
+    if (totalCategories < 2) {
+      Alert.alert('Please select atleast 2 categories');
+      return;
+    } else if (totalCategories > 6) {
+      Alert.alert('You may not add more than 6 categories');
+      return;
+    } else if (selectedCategories.length === 0) {
+      Alert.alert('Please select some categories!');
+      return;
+    }
+    try {
+      if (isOnBoarding) {
+        const token = await getTokenOrLogout(dispatch);
+        await postMomentCategories(selectedCategories, token);
+        userLogin(dispatch, {userId: userId, username: username});
+      } else {
+        dispatch(updateMomentCategories(selectedCategories, true, userId));
+        navigation.goBack();
+      }
+    } catch (error) {
+      console.log(error);
+      Alert.alert('There was a problem');
+    }
+  };
+
+  /**
+   * Using a scroll view to accomodate dynamic category creation later on
+   */
+  return (
+    <ScrollView bounces={false}>
+      <Background
+        style={styles.container}
+        gradientType={BackgroundGradientType.Dark}>
+        <StatusBar barStyle="light-content" />
+        <Text style={styles.subtext}>Create new categories</Text>
+        <View style={styles.container}>
+          <View style={styles.linkerContainer}>
+            {MOMENT_CATEGORIES.map((category, index) => (
+              <MomentCategory
+                key={index}
+                categoryType={category}
+                isSelected={selectedCategories.includes(category)}
+                isAdded={categories[category]}
+                onSelect={onSelect}
+              />
+            ))}
+          </View>
+          <TouchableOpacity
+            onPress={handleButtonPress}
+            style={styles.finalAction}>
+            <Text style={styles.finalActionLabel}>
+              {isOnBoarding ? 'Login' : 'Create'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Background>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginBottom: '10%',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  linkerContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignContent: 'center',
+    marginBottom: '10%',
+  },
+  header: {
+    color: '#fff',
+    fontSize: 22,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '4%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginVertical: '8%',
+    marginHorizontal: '10%',
+  },
+  finalAction: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#8F01FF',
+    marginBottom: '25%',
+  },
+  finalActionLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+  },
+});
+
+export default CategorySelection;
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 83a8a2bc..b0b42203 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -12,6 +12,7 @@ import {
 
 import {OnboardingStackParams} from '../../routes';
 import {RegistrationWizard, Background} from '../../components';
+import {BackgroundGradientType} from '../../types';
 
 type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>;
 type CheckpointNavigationProp = StackNavigationProp<
@@ -44,7 +45,9 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
   };
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="six" />
       <View style={styles.textContainer}>
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index 3f0ea124..afdf6d3f 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -26,7 +26,8 @@ import {
   Alert,
   Platform,
 } from 'react-native';
-import {trackPromise} from 'react-promise-tracker';
+
+import {BackgroundGradientType} from '../../types';
 
 type InvitationCodeVerificationScreenNavigationProp = StackNavigationProp<
   OnboardingStackParams,
@@ -86,13 +87,16 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     <View style={styles.footer}>
       <ArrowButton
         direction="backward"
-        onPress={() => navigation.navigate('Login')}
+        onPress={() => navigation.navigate('WelcomeScreen')}
       />
     </View>
   );
 
   return (
-    <Background centered style={styles.container}>
+    <Background
+      centered
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <RegistrationWizard style={styles.wizard} step="one" />
       <KeyboardAvoidingView behavior="padding" style={styles.form}>
         <Text style={styles.formHeader}>Enter the code</Text>
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index cb550ef8..1315fdf5 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -17,10 +17,15 @@ import {OnboardingStackParams} from '../../routes/onboarding';
 import {Background, TaggInput, SubmitButton} from '../../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
-import {UserType} from '../../types';
+import {
+  BackgroundGradientType,
+  CategorySelectionScreenType,
+  UserType,
+} from '../../types';
 import {useDispatch} from 'react-redux';
 import {userLogin} from '../../utils';
 import SplashScreen from 'react-native-splash-screen';
+import {MOMENT_CATEGORIES_MAP} from '../../store/initialStates';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
@@ -194,8 +199,8 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   /*
    * Handles tap on "Get Started" text by resetting fields & navigating to the registration page.
    */
-  const goToRegistration = () => {
-    navigation.navigate('InvitationCodeVerification');
+  const startRegistrationProcess = () => {
+    navigation.navigate('WelcomeScreen');
     setForm({...form, attemptedSubmit: false});
   };
 
@@ -244,7 +249,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           accessible={true}
           accessibilityLabel="Get started"
           style={styles.getStarted}
-          onPress={goToRegistration}>
+          onPress={startRegistrationProcess}>
           Get started!
         </Text>
       </TouchableOpacity>
@@ -252,7 +257,10 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   );
 
   return (
-    <Background centered style={styles.container}>
+    <Background
+      centered
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
diff --git a/src/screens/onboarding/PasswordReset.tsx b/src/screens/onboarding/PasswordReset.tsx
index 25991d6e..11ca60d5 100644
--- a/src/screens/onboarding/PasswordReset.tsx
+++ b/src/screens/onboarding/PasswordReset.tsx
@@ -24,6 +24,7 @@ import {
 import {trackPromise} from 'react-promise-tracker';
 import {passwordRegex} from '../../constants';
 import {handlePasswordReset} from '../../services';
+import {BackgroundGradientType} from '../../types';
 
 type PasswordResetRequestRouteProp = RouteProp<
   OnboardingStackParams,
@@ -141,7 +142,9 @@ const PasswordResetRequest: React.FC<PasswordResetRequestProps> = ({
   );
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
diff --git a/src/screens/onboarding/PasswordResetRequest.tsx b/src/screens/onboarding/PasswordResetRequest.tsx
index 5f67eb19..cf086f59 100644
--- a/src/screens/onboarding/PasswordResetRequest.tsx
+++ b/src/screens/onboarding/PasswordResetRequest.tsx
@@ -24,7 +24,7 @@ import {
 import {trackPromise} from 'react-promise-tracker';
 import {emailRegex, usernameRegex} from '../../constants';
 import {handlePasswordResetRequest} from '../../services';
-import {VerificationScreenType} from '../../types';
+import {BackgroundGradientType, VerificationScreenType} from '../../types';
 
 type PasswordResetRequestRouteProp = RouteProp<
   OnboardingStackParams,
@@ -115,7 +115,9 @@ const PasswordResetRequest: React.FC<PasswordResetRequestProps> = ({
   );
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 9d99f2b1..611f1598 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -27,6 +27,7 @@ import {
   genderRegex,
 } from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
+import {BackgroundGradientType} from '../../types';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -343,7 +344,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
   };
 
   return (
-    <Background centered>
+    <Background centered gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <View style={styles.profile}>
         <LargeProfilePic />
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index 3373b903..54c4e210 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -27,7 +27,7 @@ import {trackPromise} from 'react-promise-tracker';
 import {SEND_OTP_ENDPOINT} from '../../constants';
 
 import {phoneRegex} from '../../constants';
-import {VerificationScreenType} from '../../types';
+import {BackgroundGradientType, VerificationScreenType} from '../../types';
 
 type RegistrationScreenOneRouteProp = RouteProp<
   OnboardingStackParams,
@@ -138,7 +138,9 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
   );
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="two" />
       <KeyboardAvoidingView
diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/RegistrationThree.tsx
index 614795ca..52a6de84 100644
--- a/src/screens/onboarding/RegistrationThree.tsx
+++ b/src/screens/onboarding/RegistrationThree.tsx
@@ -29,6 +29,7 @@ import {
 } from '../../components';
 import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
+import {BackgroundGradientType} from '../../types';
 
 type RegistrationScreenThreeRouteProp = RouteProp<
   OnboardingStackParams,
@@ -241,7 +242,9 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
   );
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="five" />
       <KeyboardAvoidingView
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index edefebaf..2f67d8c8 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -22,6 +22,7 @@ import {
 } from '../../components';
 
 import {nameRegex, emailRegex} from '../../constants';
+import {BackgroundGradientType} from '../../types';
 
 type RegistrationScreenTwoRouteProp = RouteProp<
   OnboardingStackParams,
@@ -170,7 +171,9 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
   );
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="four" />
       <KeyboardAvoidingView
diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/SocialMedia.tsx
index ee2bed10..d2a43e7a 100644
--- a/src/screens/onboarding/SocialMedia.tsx
+++ b/src/screens/onboarding/SocialMedia.tsx
@@ -1,4 +1,5 @@
 import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
 import {
   Alert,
@@ -11,7 +12,11 @@ import {
   View,
 } from 'react-native';
 import {useDispatch} from 'react-redux';
-import {LinkerType} from 'src/types';
+import {
+  BackgroundGradientType,
+  CategorySelectionScreenType,
+  LinkerType,
+} from '../..//types';
 import {
   Background,
   LinkSocialMedia,
@@ -19,7 +24,7 @@ import {
 } from '../../components';
 import {SOCIAL_LIST} from '../../constants/';
 import {OnboardingStackParams} from '../../routes';
-import {userLogin} from '../../utils';
+import {MOMENT_CATEGORIES_MAP} from '../../store/initialStates';
 
 /**
  * Social Media Screen for displaying social media linkers
@@ -27,11 +32,17 @@ import {userLogin} from '../../utils';
 
 type SocialMediaRouteProps = RouteProp<OnboardingStackParams, 'SocialMedia'>;
 
+type SocialMediaNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'SocialMedia'
+>;
+
 interface SocialMediaProps {
   route: SocialMediaRouteProps;
+  navigation: SocialMediaNavigationProps;
 }
 
-const SocialMedia: React.FC<SocialMediaProps> = ({route}) => {
+const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
   const {userId, username} = route.params;
   const linkers: Array<LinkerType> = [];
 
@@ -56,17 +67,18 @@ const SocialMedia: React.FC<SocialMediaProps> = ({route}) => {
   //     });
   //   };
 
-  const handleLogin = () => {
-    try {
-      userLogin(dispatch, {userId: userId, username: username});
-    } catch (error) {
-      console.log(error);
-      Alert.alert('There was a problem logging you in');
-    }
+  const handleNext = () => {
+    navigation.navigate('CategorySelection', {
+      categories: MOMENT_CATEGORIES_MAP,
+      screenType: CategorySelectionScreenType.Onboarding,
+      user: {userId: userId, username: username},
+    });
   };
 
   return (
-    <Background style={styles.container}>
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -84,8 +96,8 @@ const SocialMedia: React.FC<SocialMediaProps> = ({route}) => {
           ))}
         </View>
       </KeyboardAvoidingView>
-      <TouchableOpacity onPress={handleLogin} style={styles.loginButton}>
-        <Text style={styles.loginButtonLabel}>Login</Text>
+      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
+        <Text style={styles.nextButtonLabel}>Next</Text>
       </TouchableOpacity>
     </Background>
   );
@@ -133,7 +145,7 @@ const styles = StyleSheet.create({
     marginBottom: '35%',
     marginHorizontal: '10%',
   },
-  loginButton: {
+  nextButton: {
     backgroundColor: '#8F01FF',
     justifyContent: 'center',
     alignItems: 'center',
@@ -144,7 +156,7 @@ const styles = StyleSheet.create({
     borderColor: '#8F01FF',
     marginBottom: '15%',
   },
-  loginButtonLabel: {
+  nextButtonLabel: {
     fontSize: 16,
     fontWeight: '500',
     color: '#ddd',
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 9fa1c12f..c808f30b 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -27,7 +27,7 @@ import {
   Platform,
 } from 'react-native';
 import {trackPromise} from 'react-promise-tracker';
-import {VerificationScreenType} from '../../types';
+import {BackgroundGradientType, VerificationScreenType} from '../../types';
 import {
   handlePasswordCodeVerification,
   sendOtp,
@@ -137,7 +137,10 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
   );
 
   return (
-    <Background centered style={styles.container}>
+    <Background
+      centered
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
       {isPhoneVerification ? (
         <RegistrationWizard style={styles.wizard} step="three" />
       ) : (
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
new file mode 100644
index 00000000..fcdd9bc5
--- /dev/null
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
+import {SCREEN_WIDTH} from '../../utils';
+import {Background} from '../../components';
+import {OnboardingStackParams} from '../../routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {BackgroundGradientType} from '../../types';
+
+type WelcomeScreenNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'WelcomeScreen'
+>;
+
+interface WelcomeScreenProps {
+  navigation: WelcomeScreenNavigationProps;
+}
+
+const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
+  const handleNext = () => {
+    navigation.navigate('InvitationCodeVerification');
+  };
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <Image
+        source={require('../../assets/images/welcome.png')}
+        style={styles.image}
+      />
+
+      <View>
+        <Text style={styles.header}>Welcome to TAGG!</Text>
+        <Text style={styles.subtext}>
+          This is the new social networking platform for you! It will help you
+          create your own personalized digital space where you can express who
+          you are, along with all the moments that comprehensively define you!
+        </Text>
+      </View>
+      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
+        <Text style={styles.nextButtonLabel}>Next</Text>
+      </TouchableOpacity>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    /**
+     * Set primary axis to column
+     * Align items to centre along that primary axis and the secondary axis as well
+     */
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+  },
+  header: {
+    color: '#fff',
+    fontSize: 32,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '4%',
+    marginHorizontal: '10%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '15%',
+    marginHorizontal: '10%',
+  },
+  nextButton: {
+    backgroundColor: '#8F01FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#8F01FF',
+    marginBottom: '15%',
+  },
+  nextButtonLabel: {
+    fontSize: 30,
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+export default WelcomeScreen;
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 2411a7e7..ec833929 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -9,3 +9,5 @@ export {default as InvitationCodeVerification} from './InvitationCodeVerificatio
 export {default as SocialMedia} from './SocialMedia';
 export {default as PasswordResetRequest} from './PasswordResetRequest';
 export {default as PasswordReset} from './PasswordReset';
+export {default as WelcomeScreen} from './WelcomeScreen';
+export {default as CategorySelection} from './CategorySelection';
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 50e1c006..316ad5d4 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -39,6 +39,7 @@ import {HeaderHeight, SCREEN_HEIGHT} from '../../utils';
 import {RootState} from '../../store/rootReducer';
 import {useDispatch, useSelector} from 'react-redux';
 import {loadUserData} from '../../store/actions';
+import {BackgroundGradientType} from '../../types';
 
 type EditProfileNavigationProp = StackNavigationProp<
   ProfileStackParams,
@@ -219,7 +220,6 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
     });
   };
 
-
   const handleSnapchatUpdate = (newUsername: string) => {
     // Allow any username, empty means to "un-link" it
     // TODO: refresh taggs bar after
@@ -373,7 +373,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
   }, [navigation, handleSubmit]);
 
   return (
-    <Background centered>
+    <Background centered gradientType={BackgroundGradientType.Light}>
       <SafeAreaView>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>