From fd72bd92b64a13bccd2cfbd944de078690b0d134 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 15 Apr 2021 16:56:59 -0400
Subject: moved unused files to legacy

---
 src/screens/onboarding/AddWaitlistUserScreen.tsx   | 237 ---------
 src/screens/onboarding/Checkpoint.tsx              | 143 -----
 src/screens/onboarding/ProfileOnboarding.tsx       | 575 ---------------------
 src/screens/onboarding/RegistrationOne.tsx         | 214 --------
 src/screens/onboarding/RegistrationThree.tsx       | 365 -------------
 src/screens/onboarding/RegistrationTwo.tsx         | 278 ----------
 src/screens/onboarding/SocialMedia.tsx             | 162 ------
 src/screens/onboarding/WaitlistSuccessScreen.tsx   | 156 ------
 src/screens/onboarding/index.ts                    |  25 +-
 .../onboarding/legacy/AddWaitlistUserScreen.tsx    | 237 +++++++++
 src/screens/onboarding/legacy/Checkpoint.tsx       | 142 +++++
 .../onboarding/legacy/ProfileOnboarding.tsx        | 575 +++++++++++++++++++++
 src/screens/onboarding/legacy/RegistrationOne.tsx  | 211 ++++++++
 .../onboarding/legacy/RegistrationThree.tsx        | 363 +++++++++++++
 src/screens/onboarding/legacy/RegistrationTwo.tsx  | 275 ++++++++++
 src/screens/onboarding/legacy/SocialMedia.tsx      | 161 ++++++
 .../onboarding/legacy/WaitlistSuccessScreen.tsx    | 156 ++++++
 17 files changed, 2127 insertions(+), 2148 deletions(-)
 delete mode 100644 src/screens/onboarding/AddWaitlistUserScreen.tsx
 delete mode 100644 src/screens/onboarding/Checkpoint.tsx
 delete mode 100644 src/screens/onboarding/ProfileOnboarding.tsx
 delete mode 100644 src/screens/onboarding/RegistrationOne.tsx
 delete mode 100644 src/screens/onboarding/RegistrationThree.tsx
 delete mode 100644 src/screens/onboarding/RegistrationTwo.tsx
 delete mode 100644 src/screens/onboarding/SocialMedia.tsx
 delete mode 100644 src/screens/onboarding/WaitlistSuccessScreen.tsx
 create mode 100644 src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx
 create mode 100644 src/screens/onboarding/legacy/Checkpoint.tsx
 create mode 100644 src/screens/onboarding/legacy/ProfileOnboarding.tsx
 create mode 100644 src/screens/onboarding/legacy/RegistrationOne.tsx
 create mode 100644 src/screens/onboarding/legacy/RegistrationThree.tsx
 create mode 100644 src/screens/onboarding/legacy/RegistrationTwo.tsx
 create mode 100644 src/screens/onboarding/legacy/SocialMedia.tsx
 create mode 100644 src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx

(limited to 'src')

diff --git a/src/screens/onboarding/AddWaitlistUserScreen.tsx b/src/screens/onboarding/AddWaitlistUserScreen.tsx
deleted file mode 100644
index 489c30f1..00000000
--- a/src/screens/onboarding/AddWaitlistUserScreen.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import {StackNavigationProp} from '@react-navigation/stack';
-import * as React from 'react';
-import {
-  KeyboardAvoidingView,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {
-  ArrowButton,
-  Background,
-  LoadingIndicator,
-  TaggInput,
-} from '../../components';
-import {nameRegex, phoneRegex} from '../../constants';
-import {OnboardingStackParams} from '../../routes';
-import {adduserToWaitlist} from '../../services';
-import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT} from '../../utils';
-
-type AddWaitlistUserScreenProp = StackNavigationProp<
-  OnboardingStackParams,
-  'AddWaitlistUser'
->;
-
-interface AddWaitlistUserScreenProps {
-  navigation: AddWaitlistUserScreenProp;
-}
-
-const AddWaitlistUserScreen: React.FC<AddWaitlistUserScreenProps> = ({
-  navigation,
-}) => {
-  const phoneRef = React.useRef();
-  const lnameRef = React.useRef();
-
-  const [form, setForm] = React.useState({
-    phone_number: {value: '', isValid: false},
-    first_name: {value: '', isValid: false},
-    last_name: {value: '', isValid: false},
-    attemptedSubmit: false,
-  });
-
-  //Handlers
-  const handleFocusChange = (field: string): void => {
-    switch (field) {
-      case 'last_name':
-        const lnameField: any = lnameRef.current;
-        lnameField.focus();
-        break;
-      case 'phone_number':
-        const phoneField: any = phoneRef.current;
-        phoneField.focus();
-        break;
-      default:
-        return;
-    }
-  };
-
-  const validate = (value: string, type: string) => {
-    let isValid: boolean = false;
-    switch (type) {
-      case 'phone_number':
-        isValid = phoneRegex.test(value);
-        break;
-      default:
-        isValid = nameRegex.test(value);
-        break;
-    }
-    return isValid;
-  };
-
-  const handleUpdate = (value: string, type: string) => {
-    value = value.trim();
-    const isValid = validate(value, type);
-    setForm({
-      ...form,
-      [type]: {value, isValid},
-    });
-  };
-
-  const handleAddUser = async () => {
-    if (!form.attemptedSubmit) {
-      setForm({
-        ...form,
-        attemptedSubmit: true,
-      });
-    }
-    try {
-      const {phone_number, first_name, last_name} = form;
-      if (phone_number.isValid && first_name.isValid && last_name.isValid) {
-        const success = await adduserToWaitlist(
-          phone_number.value,
-          first_name.value,
-          last_name.value,
-        );
-        if (success) {
-          navigation.navigate('WaitlistSuccess');
-        }
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  };
-
-  //Components
-  const Footer = () => (
-    <View style={styles.footer}>
-      <ArrowButton
-        direction="backward"
-        onPress={() => navigation.navigate('InvitationCodeVerification')}
-      />
-    </View>
-  );
-
-  const {phone_number, first_name, last_name} = form;
-
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <View>
-          <Text style={styles.formHeader}>JOIN WAITLIST</Text>
-        </View>
-        <TaggInput
-          accessibilityHint="Enter your first name."
-          accessibilityLabel="First name input field."
-          placeholder="First Name"
-          autoCompleteType="name"
-          textContentType="name"
-          returnKeyType="next"
-          onChangeText={(text) => handleUpdate(text, 'first_name')}
-          onSubmitEditing={() => handleFocusChange('first_name')}
-          blurOnSubmit={false}
-          valid={first_name.isValid}
-          invalidWarning="Please enter a valid first name."
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
-          accessibilityHint="Enter your last name."
-          accessibilityLabel="Last name input field."
-          placeholder="Last Name"
-          autoCompleteType="name"
-          textContentType="name"
-          returnKeyType="next"
-          onChangeText={(text) => handleUpdate(text, 'last_name')}
-          blurOnSubmit={false}
-          ref={lnameRef}
-          valid={last_name.isValid}
-          invalidWarning="Please enter a valid last name."
-          onSubmitEditing={() => handleFocusChange('phone_number')}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
-          maxLength={12}
-          accessibilityHint="Enter your phone number."
-          accessibilityLabel="Phone number input field."
-          placeholder="Phone Number"
-          autoCompleteType="tel"
-          textContentType="telephoneNumber"
-          autoCapitalize="none"
-          returnKeyType="next"
-          keyboardType="phone-pad"
-          onChangeText={(text) => handleUpdate(text, 'phone_number')}
-          blurOnSubmit={false}
-          ref={phoneRef}
-          valid={phone_number.isValid}
-          invalidWarning="Please enter a valid 10 digit number."
-          onSubmitEditing={handleAddUser}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TouchableOpacity onPress={handleAddUser} style={styles.finalAction}>
-          <Text style={styles.finalActionLabel}>Submit</Text>
-        </TouchableOpacity>
-        <LoadingIndicator />
-      </KeyboardAvoidingView>
-      <Footer />
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  finalAction: {
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#fff',
-    marginVertical: SCREEN_HEIGHT / 20,
-  },
-  finalActionLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: 'black',
-  },
-  formHeader: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: '600',
-    marginBottom: '16%',
-  },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
-  },
-});
-
-export default AddWaitlistUserScreen;
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
deleted file mode 100644
index b0b42203..00000000
--- a/src/screens/onboarding/Checkpoint.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import React from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
-  Platform,
-  TouchableOpacity,
-} from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-import {RegistrationWizard, Background} from '../../components';
-import {BackgroundGradientType} from '../../types';
-
-type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>;
-type CheckpointNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'Checkpoint'
->;
-interface CheckpointProps {
-  route: CheckpointRouteProp;
-  navigation: CheckpointNavigationProp;
-}
-/**
- * Checkpoint to ask user if profile setup should be done
- * @param navigation react-navigation navigation object
- */
-const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
-  const {userId, username} = route.params;
-
-  const handleSkip = () => {
-    navigation.navigate('SocialMedia', {
-      userId: userId,
-      username: username,
-    });
-  };
-
-  const handleProceed = () => {
-    navigation.navigate('ProfileOnboarding', {
-      userId: userId,
-      username: username,
-    });
-  };
-
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="six" />
-      <View style={styles.textContainer}>
-        <Text style={styles.header}>You are registered!</Text>
-        <Text style={styles.subtext}>
-          We're almost there. Would you like to setup your profile now?
-        </Text>
-        <View style={styles.buttonContainer}>
-          <TouchableOpacity onPress={handleSkip} style={styles.skipButton}>
-            <Text style={styles.skipButtonLabel}>Do it later</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={handleProceed}
-            style={styles.proceedButton}>
-            <Text style={styles.proceedButtonLabel}>Let's do it!</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  textContainer: {
-    marginTop: '65%',
-  },
-
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
-  header: {
-    color: '#fff',
-    fontSize: 22,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: '4%',
-    marginHorizontal: '10%',
-  },
-  subtext: {
-    color: '#fff',
-    fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: '16%',
-    marginHorizontal: '10%',
-  },
-  proceedButton: {
-    backgroundColor: '#8F01FF',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    marginTop: '5%',
-  },
-  proceedButtonLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#fff',
-  },
-  skipButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    marginTop: '5%',
-  },
-  skipButtonLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#ddd',
-  },
-});
-
-export default Checkpoint;
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
deleted file mode 100644
index c173c8e3..00000000
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ /dev/null
@@ -1,575 +0,0 @@
-import AsyncStorage from '@react-native-community/async-storage';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import moment from 'moment';
-import React, {useMemo} from 'react';
-import {
-  Alert,
-  Image,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import ImagePicker from 'react-native-image-crop-picker';
-import Animated from 'react-native-reanimated';
-import {
-  Background,
-  BirthDatePicker,
-  TaggBigInput,
-  TaggDropDown,
-  TaggInput,
-} from '../../components';
-import {
-  bioRegex,
-  CLASS_YEAR_LIST,
-  EDIT_PROFILE_ENDPOINT,
-  genderRegex,
-  TAGG_PURPLE,
-  websiteRegex,
-} from '../../constants';
-import {
-  ERROR_DOUBLE_CHECK_CONNECTION,
-  ERROR_PROFILE_CREATION_SHORT,
-  ERROR_SELECT_CLASS_YEAR,
-  ERROR_SOMETHING_WENT_WRONG_REFRESH,
-  ERROR_UPLOAD_LARGE_PROFILE_PIC,
-  ERROR_UPLOAD_SMALL_PROFILE_PIC,
-} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes/onboarding';
-import {BackgroundGradientType} from '../../types';
-import {SCREEN_WIDTH} from '../../utils';
-
-type ProfileOnboardingScreenRouteProp = RouteProp<
-  OnboardingStackParams,
-  'ProfileOnboarding'
->;
-type ProfileOnboardingScreenNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'ProfileOnboarding'
->;
-interface ProfileOnboardingProps {
-  route: ProfileOnboardingScreenRouteProp;
-  navigation: ProfileOnboardingScreenNavigationProp;
-}
-
-/**
- * Create profile screen for onboarding.
- * @param navigation react-navigation navigation object
- */
-
-const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
-  route,
-  navigation,
-}) => {
-  const {userId, username} = route.params;
-  let emptyDate: string | undefined;
-  const [form, setForm] = React.useState({
-    largePic: '',
-    smallPic: '',
-    website: '',
-    bio: '',
-    birthdate: emptyDate,
-    gender: '',
-    isValidWebsite: true,
-    isValidBio: true,
-    isValidGender: true,
-    attemptedSubmit: false,
-    token: '',
-    classYear: -1,
-  });
-  const [customGender, setCustomGender] = React.useState(Boolean);
-
-  // refs for changing focus
-  const bioRef = React.useRef();
-  const birthdateRef = React.useRef();
-  const genderRef = React.useRef();
-  const customGenderRef = React.useRef();
-  /**
-   * Handles focus change to the next input field.
-   * @param field key for field to move focus onto
-   */
-  const handleFocusChange = (field: string): void => {
-    switch (field) {
-      case 'bio':
-        const bioField: any = bioRef.current;
-        bioField.focus();
-        break;
-      case 'birthdate':
-        const birthdateField: any = birthdateRef.current;
-        birthdateField.focus();
-        break;
-      case 'gender':
-        const genderField: any = genderRef.current;
-        genderField.focus();
-        break;
-      case 'customGender':
-        const customGenderField: any = customGenderRef.current;
-        customGenderField.focus();
-        break;
-      default:
-        return;
-    }
-  };
-
-  var classYearList: Array<any> = [];
-
-  CLASS_YEAR_LIST.map((value) => {
-    classYearList.push({label: value, value: value});
-  });
-
-  /**
-   * Profile screen "Add header image" button
-   */
-  const LargeProfilePic = () => (
-    <TouchableOpacity
-      accessible={true}
-      accessibilityLabel="ADD HEADER IMAGE"
-      onPress={goToGalleryLargePic}
-      style={styles.largeProfileUploader}>
-      {form.largePic ? (
-        <Image source={{uri: form.largePic}} style={styles.largeProfilePic} />
-      ) : (
-        <Text style={styles.largeProfileText}>ADD HEADER IMAGE</Text>
-      )}
-    </TouchableOpacity>
-  );
-
-  /**
-   * Profile screen "Add profile picture" button
-   */
-  const SmallProfilePic = () => (
-    <TouchableOpacity
-      accessible={true}
-      accessibilityLabel="ADD PROFILE PICTURE"
-      onPress={goToGallerySmallPic}
-      style={styles.smallProfileUploader}>
-      {form.smallPic ? (
-        <Image source={{uri: form.smallPic}} style={styles.smallProfilePic} />
-      ) : (
-        <Text style={styles.smallProfileText}>ADD PROFILE PICTURE</Text>
-      )}
-    </TouchableOpacity>
-  );
-
-  const goToGalleryLargePic = () => {
-    ImagePicker.openPicker({
-      smartAlbums: [
-        'Favorites',
-        'RecentlyAdded',
-        'SelfPortraits',
-        'Screenshots',
-        'UserLibrary',
-      ],
-      width: 580,
-      height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Select Header',
-      mediaType: 'photo',
-    }).then((picture) => {
-      if ('path' in picture) {
-        setForm({
-          ...form,
-          largePic: picture.path,
-        });
-      }
-    });
-  };
-
-  const goToGallerySmallPic = () => {
-    ImagePicker.openPicker({
-      smartAlbums: [
-        'Favorites',
-        'RecentlyAdded',
-        'SelfPortraits',
-        'Screenshots',
-        'UserLibrary',
-      ],
-      width: 580,
-      height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Select Profile Picture',
-      mediaType: 'photo',
-      cropperCircleOverlay: true,
-    }).then((picture) => {
-      if ('path' in picture) {
-        setForm({
-          ...form,
-          smallPic: picture.path,
-        });
-      }
-    });
-  };
-
-  /*
-   * Handles changes to the website field value and verifies the input by updating state and running a validation function.
-   */
-  const handleWebsiteUpdate = (website: string) => {
-    website = website.trim();
-    let isValidWebsite: boolean = websiteRegex.test(website);
-    setForm({
-      ...form,
-      website,
-      isValidWebsite,
-    });
-  };
-
-  /*
-   * Handles changes to the bio field value and verifies the input by updating state and running a validation function.
-   */
-  const handleBioUpdate = (bio: string) => {
-    let isValidBio: boolean = bioRegex.test(bio);
-    setForm({
-      ...form,
-      bio,
-      isValidBio,
-    });
-  };
-
-  const handleGenderUpdate = (gender: string) => {
-    if (gender === 'custom') {
-      setCustomGender(true);
-    } else {
-      setCustomGender(false);
-      let isValidGender: boolean = true;
-      setForm({
-        ...form,
-        gender,
-        isValidGender,
-      });
-    }
-  };
-
-  const handleClassYearUpdate = (value: string) => {
-    const classYear = Number.parseInt(value);
-    setForm({
-      ...form,
-      classYear,
-    });
-  };
-
-  const handleCustomGenderUpdate = (gender: string) => {
-    let isValidGender: boolean = genderRegex.test(gender);
-    gender = gender.replace(' ', '-');
-    setForm({
-      ...form,
-      gender,
-      isValidGender,
-    });
-  };
-
-  const handleBirthdateUpdate = (birthdate: Date) => {
-    setForm({
-      ...form,
-      birthdate: birthdate && moment(birthdate).format('YYYY-MM-DD'),
-    });
-  };
-
-  const handleSubmit = async () => {
-    if (!form.largePic) {
-      Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC);
-      return;
-    }
-    if (!form.smallPic) {
-      Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC);
-      return;
-    }
-    if (form.classYear === -1) {
-      Alert.alert(ERROR_SELECT_CLASS_YEAR);
-      return;
-    }
-    if (!form.attemptedSubmit) {
-      setForm({
-        ...form,
-        attemptedSubmit: true,
-      });
-    }
-    let invalidFields: boolean = false;
-    const request = new FormData();
-    if (form.largePic) {
-      request.append('largeProfilePicture', {
-        uri: form.largePic,
-        name: 'large_profile_pic.jpg',
-        type: 'image/jpg',
-      });
-    }
-    if (form.smallPic) {
-      request.append('smallProfilePicture', {
-        uri: form.smallPic,
-        name: 'small_profile_pic.jpg',
-        type: 'image/jpg',
-      });
-    }
-    if (form.website) {
-      if (form.isValidWebsite) {
-        request.append('website', form.website);
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-        invalidFields = true;
-      }
-    }
-
-    if (form.bio) {
-      if (form.isValidBio) {
-        request.append('biography', form.bio);
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-        invalidFields = true;
-      }
-    }
-
-    if (form.birthdate) {
-      request.append('birthday', form.birthdate);
-    }
-
-    if (customGender) {
-      if (form.isValidGender) {
-        request.append('gender', form.gender);
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-        invalidFields = true;
-      }
-    } else {
-      if (form.isValidGender) {
-        request.append('gender', form.gender);
-      }
-    }
-
-    if (form.classYear !== -1) {
-      request.append('university_class', form.classYear);
-    }
-
-    if (invalidFields) {
-      return;
-    }
-
-    const endpoint = EDIT_PROFILE_ENDPOINT + `${userId}/`;
-    try {
-      const token = await AsyncStorage.getItem('token');
-      let response = await fetch(endpoint, {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          Authorization: 'Token ' + token,
-        },
-        body: request,
-      });
-      let statusCode = response.status;
-      let data = await response.json();
-      if (statusCode === 200) {
-        navigation.navigate('SocialMedia', {
-          userId: userId,
-          username: username,
-        });
-      } else if (statusCode === 400) {
-        Alert.alert(
-          'Profile update failed. 😔',
-          data.error || 'Something went wrong! 😭',
-        );
-      } else {
-        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
-      }
-    } catch (error) {
-      Alert.alert(ERROR_PROFILE_CREATION_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
-      return {
-        name: 'Profile creation error',
-        description: error,
-      };
-    }
-  };
-
-  const profilePics = useMemo(() => {
-    return (
-      <View style={styles.profile}>
-        <LargeProfilePic />
-        <SmallProfilePic />
-      </View>
-    );
-  }, [form.largePic, form.smallPic]);
-
-  return (
-    <Animated.ScrollView bounces={false}>
-      <Background
-        centered
-        gradientType={BackgroundGradientType.Light}
-        style={styles.container}>
-        <StatusBar barStyle="light-content" />
-        {profilePics}
-        <View style={styles.contentContainer}>
-          <TaggInput
-            accessibilityHint="Enter a website."
-            accessibilityLabel="Website input field."
-            placeholder="Website"
-            autoCompleteType="off"
-            textContentType="URL"
-            autoCapitalize="none"
-            returnKeyType="next"
-            onChangeText={handleWebsiteUpdate}
-            onSubmitEditing={() => handleFocusChange('bio')}
-            blurOnSubmit={false}
-            valid={form.isValidWebsite}
-            attemptedSubmit={form.attemptedSubmit}
-            invalidWarning={'Website must be a valid link to your website'}
-            width={280}
-          />
-          <TaggBigInput
-            accessibilityHint="Enter a bio."
-            accessibilityLabel="Bio input field."
-            placeholder="Bio"
-            autoCompleteType="off"
-            textContentType="none"
-            autoCapitalize="none"
-            returnKeyType="next"
-            onChangeText={handleBioUpdate}
-            onSubmitEditing={() => handleFocusChange('bio')}
-            blurOnSubmit={false}
-            ref={bioRef}
-            valid={form.isValidBio}
-            attemptedSubmit={form.attemptedSubmit}
-            invalidWarning={
-              'Bio must be less than 150 characters and must contain valid characters'
-            }
-            width={280}
-          />
-          <BirthDatePicker
-            ref={birthdateRef}
-            handleBDUpdate={handleBirthdateUpdate}
-            width={280}
-            date={form.birthdate}
-            showPresetdate={false}
-          />
-          <TaggDropDown
-            onValueChange={(value: string) => handleClassYearUpdate(value)}
-            items={classYearList}
-            placeholder={{
-              label: 'Class Year',
-              value: null,
-              color: '#ddd',
-            }}
-          />
-          {customGender && (
-            <TaggInput
-              accessibilityHint="Custom"
-              accessibilityLabel="Gender input field."
-              placeholder="Enter your gender"
-              autoCompleteType="off"
-              textContentType="none"
-              autoCapitalize="none"
-              returnKeyType="next"
-              blurOnSubmit={false}
-              ref={customGenderRef}
-              onChangeText={handleCustomGenderUpdate}
-              onSubmitEditing={() => handleSubmit()}
-              valid={form.isValidGender}
-              attemptedSubmit={form.attemptedSubmit}
-              invalidWarning={
-                'Custom field can only contain letters and hyphens'
-              }
-              width={280}
-            />
-          )}
-          <TaggDropDown
-            onValueChange={(value: string) => handleGenderUpdate(value)}
-            items={[
-              {label: 'Male', value: 'male'},
-              {label: 'Female', value: 'female'},
-              {label: 'Custom', value: 'custom'},
-            ]}
-            placeholder={{
-              label: 'Gender',
-              value: null,
-              color: '#ddd',
-            }}
-          />
-          <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
-            <Text style={styles.submitBtnLabel}>Let's start!</Text>
-          </TouchableOpacity>
-        </View>
-      </Background>
-    </Animated.ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    marginBottom: '10%',
-  },
-  profile: {
-    flexDirection: 'row',
-    marginBottom: '5%',
-  },
-  contentContainer: {
-    position: 'relative',
-    width: 280,
-    alignSelf: 'center',
-  },
-  largeProfileUploader: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 15,
-    backgroundColor: '#fff',
-    marginLeft: '13%',
-    marginTop: '10%',
-    height: 230,
-    width: 230,
-    borderRadius: 23,
-  },
-  largeProfileText: {
-    textAlign: 'center',
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#863FF9',
-  },
-  largeProfilePic: {
-    height: 230,
-    width: 230,
-    borderRadius: 23,
-  },
-  smallProfileUploader: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-    backgroundColor: '#E1F0FF',
-    right: '18%',
-    marginTop: '38%',
-    height: 110,
-    width: 110,
-    borderRadius: 55,
-  },
-  smallProfileText: {
-    textAlign: 'center',
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#806DF4',
-  },
-  smallProfilePic: {
-    height: 110,
-    width: 110,
-    borderRadius: 55,
-  },
-  submitBtn: {
-    backgroundColor: TAGG_PURPLE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH / 2.5,
-    height: SCREEN_WIDTH / 10,
-    borderRadius: 5,
-    marginTop: '5%',
-    alignSelf: 'center',
-    marginBottom: SCREEN_WIDTH / 3,
-  },
-  submitBtnLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#fff',
-  },
-});
-
-export default ProfileOnboarding;
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
deleted file mode 100644
index c9822f76..00000000
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
-  Alert,
-  Platform,
-  TouchableOpacity,
-  KeyboardAvoidingView,
-} from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-
-import {
-  ArrowButton,
-  RegistrationWizard,
-  TaggInput,
-  Background,
-  LoadingIndicator,
-} from '../../components';
-
-import {trackPromise} from 'react-promise-tracker';
-
-import {SEND_OTP_ENDPOINT} from '../../constants';
-
-import {phoneRegex} from '../../constants';
-import {BackgroundGradientType, VerificationScreenType} from '../../types';
-import {ERROR_EMAIL_IN_USE, ERROR_SERVER_DOWN} from '../../constants/strings';
-
-type RegistrationScreenOneRouteProp = RouteProp<
-  OnboardingStackParams,
-  'RegistrationOne'
->;
-type RegistrationScreenOneNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'RegistrationOne'
->;
-interface RegistrationOneProps {
-  route: RegistrationScreenOneRouteProp;
-  navigation: RegistrationScreenOneNavigationProp;
-}
-/**
- * Registration screen 1 for Email
- * @param navigation react-navigation navigation object
- */
-const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
-  // // refs for changing focus
-  const phoneRef = useRef();
-
-  // registration form state
-  const [form, setForm] = useState({
-    phone_number: '',
-    isValidPhone: false,
-    attemptedSubmit: false,
-  });
-
-  /*
-   * Handles changes to the email field value and verifies the input by updating state and running a validation function.
-   */
-  const handlePhoneUpdate = (phone_number: string) => {
-    phone_number = phone_number.trim();
-    let isValidPhone: boolean = phoneRegex.test(phone_number);
-    setForm({
-      ...form,
-      phone_number,
-      isValidPhone,
-    });
-  };
-
-  /**
-   * Handles a click on the "next" arrow button by navigating to Verification if email is filled correctly
-   */
-  const goToVerification = async () => {
-    if (!form.attemptedSubmit) {
-      setForm({
-        ...form,
-        attemptedSubmit: true,
-      });
-    }
-    try {
-      if (form.isValidPhone) {
-        let sendOtpResponse = await trackPromise(
-          fetch(SEND_OTP_ENDPOINT, {
-            method: 'POST',
-            body: JSON.stringify({
-              phone_number: '+1' + form.phone_number,
-            }),
-          }),
-        );
-        let otpStatusCode = sendOtpResponse.status;
-        if (otpStatusCode === 200) {
-          navigation.navigate('Verification', {
-            id: form.phone_number,
-            screenType: VerificationScreenType.Phone,
-          });
-        } else if (otpStatusCode === 409) {
-          Alert.alert(ERROR_EMAIL_IN_USE);
-        } else {
-          Alert.alert(ERROR_SERVER_DOWN);
-        }
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-      }
-    } catch (error) {
-      Alert.alert(
-        'Looks like our servers are down. 😓',
-        "Try again in a couple minutes. We're sorry for the inconvenience.",
-      );
-      return {
-        name: 'Send OTP error',
-        description: error,
-      };
-    }
-  };
-
-  const Footer = () => (
-    <View style={styles.footer}>
-      <ArrowButton
-        direction="backward"
-        onPress={() => navigation.navigate('Login')}
-      />
-      <TouchableOpacity onPress={goToVerification}>
-        <ArrowButton
-          direction="forward"
-          disabled={!form.isValidPhone}
-          onPress={goToVerification}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="two" />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <View>
-          <Text style={styles.formHeader}>ENTER PHONE NUMBER</Text>
-        </View>
-        <TaggInput
-          maxLength={10} // currently only support US phone numbers
-          accessibilityHint="Enter your phone number."
-          accessibilityLabel="Phone number input field."
-          placeholder="Phone Number"
-          autoCompleteType="tel"
-          textContentType="telephoneNumber"
-          autoCapitalize="none"
-          returnKeyType="next"
-          keyboardType="number-pad"
-          onChangeText={handlePhoneUpdate}
-          blurOnSubmit={false}
-          ref={phoneRef}
-          valid={form.isValidPhone}
-          invalidWarning={'Please enter a valid 10 digit number.'}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-          onSubmitEditing={goToVerification}
-        />
-        <LoadingIndicator />
-      </KeyboardAvoidingView>
-      <Footer />
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
-  formHeader: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: '600',
-    marginBottom: '16%',
-  },
-  load: {
-    top: '5%',
-  },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
-  },
-});
-
-export default RegistrationOne;
diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/RegistrationThree.tsx
deleted file mode 100644
index 03348e6b..00000000
--- a/src/screens/onboarding/RegistrationThree.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-/**
- * Author : Ashm Walia
- * Purpose : Add a new screen to allow the user to enter first and last name
- */
-
-import React, {useState, useRef} from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
-  Alert,
-  Platform,
-  TouchableOpacity,
-  KeyboardAvoidingView,
-  ActivityIndicator,
-} from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-import {
-  ArrowButton,
-  RegistrationWizard,
-  TaggInput,
-  TermsConditions,
-  Background,
-  LoadingIndicator,
-} from '../../components';
-import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
-import {BackgroundGradientType} from '../../types';
-import {
-  ERROR_DOUBLE_CHECK_CONNECTION,
-  ERROR_REGISTRATION,
-  ERROR_SOMETHING_WENT_WRONG_REFRESH,
-} from '../../constants/strings';
-
-type RegistrationScreenThreeRouteProp = RouteProp<
-  OnboardingStackParams,
-  'RegistrationThree'
->;
-type RegistrationScreenThreeNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'RegistrationThree'
->;
-interface RegistrationThreeProps {
-  route: RegistrationScreenThreeRouteProp;
-  navigation: RegistrationScreenThreeNavigationProp;
-}
-/**
- * Registration screen 3 for username, password, and terms and conditions
- * @param navigation react-navigation navigation object
- */
-const RegistrationThree: React.FC<RegistrationThreeProps> = ({
-  route,
-  navigation,
-}) => {
-  // refs for changing focus
-  const usernameRef = useRef();
-  const passwordRef = useRef();
-  const confirmRef = useRef();
-
-  const registrationName = route.params;
-  const fname: string = registrationName!.firstName;
-  const lname: string = registrationName!.lastName;
-  const phone: string = registrationName!.phone;
-  const email: string = registrationName!.email;
-
-  /**
-   * Handles focus change to the next input field.
-   * @param field key for field to move focus onto
-   */
-  const handleFocusChange = (field: string): void => {
-    switch (field) {
-      case 'username':
-        const usernameField: any = usernameRef.current;
-        usernameField.focus();
-        break;
-      case 'password':
-        const passwordField: any = passwordRef.current;
-        passwordField.focus();
-        break;
-      case 'confirm':
-        const confirmField: any = confirmRef.current;
-        confirmField.focus();
-        break;
-      default:
-        return;
-    }
-  };
-
-  // registration form state
-  const [form, setForm] = useState({
-    phone: '',
-    username: '',
-    password: '',
-    confirm: '',
-    isValidPhone: false,
-    isValidUsername: false,
-    isValidPassword: false,
-    passwordsMatch: false,
-    tcAccepted: false,
-    attemptedSubmit: false,
-  });
-
-  /*
-   * Handles changes to the username field value and verifies the input by updating state and running a validation function.
-   */
-  const handleUsernameUpdate = (username: string) => {
-    let isValidUsername: boolean = usernameRegex.test(username);
-    setForm({
-      ...form,
-      username,
-      isValidUsername,
-    });
-  };
-  /*
-   * Handles changes to the password field value and verifies the input by updating state and running a validation function.
-   */
-  const handlePasswordUpdate = (password: string) => {
-    let isValidPassword: boolean = passwordRegex.test(password);
-    let passwordsMatch: boolean = form.password === form.confirm;
-    setForm({
-      ...form,
-      password,
-      isValidPassword,
-      passwordsMatch,
-    });
-  };
-
-  /*
-   * Handles changes to the confirm password field value and verifies the input by updating state and running a validation function.
-   */
-  const handleConfirmUpdate = (confirm: string) => {
-    let passwordsMatch: boolean = form.password === confirm;
-    setForm({
-      ...form,
-      confirm,
-      passwordsMatch,
-    });
-  };
-
-  /**
-   * Handles changes to the terms and conditions accepted boolean.
-   * @param tcAccepted the boolean to set the terms and conditions value to
-   */
-  const handleTcUpdate = (tcAccepted: boolean) => {
-    setForm({
-      ...form,
-      tcAccepted,
-    });
-  };
-
-  /**
-   * Handles a click on the "next" arrow button by sending an API request to the backend and displaying the appropriate response.
-   */
-  const handleRegister = async () => {
-    if (!form.attemptedSubmit) {
-      setForm({
-        ...form,
-        attemptedSubmit: true,
-      });
-    }
-    try {
-      if (form.isValidUsername && form.isValidPassword && form.passwordsMatch) {
-        if (form.tcAccepted) {
-          let registerResponse = await fetch(REGISTER_ENDPOINT, {
-            method: 'POST',
-            body: JSON.stringify({
-              first_name: fname,
-              last_name: lname,
-              email: email,
-              phone_number: phone,
-              username: form.username,
-              password: form.password,
-            }),
-          });
-          let statusCode = registerResponse.status;
-          let data = await registerResponse.json();
-          const userId: string = data.UserID;
-          if (statusCode === 201) {
-            try {
-              await AsyncStorage.setItem('token', data.token);
-              /*
-               * Skipping navigation to Checkpoint for alpha
-               * navigation.navigate('Checkpoint', { userId: userId, username: form.username });
-               */
-              navigation.navigate('ProfileOnboarding', {
-                userId: userId,
-                username: form.username,
-              });
-            } catch (err) {
-              console.log(err);
-            }
-          } else if (statusCode === 409) {
-            Alert.alert(ERROR_REGISTRATION(data));
-          } else {
-            Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
-          }
-        } else {
-          Alert.alert(
-            'Terms and conditions',
-            'You must first agree to the terms and conditions.',
-          );
-        }
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-      }
-    } catch (error) {
-      Alert.alert(ERROR_REGISTRATION(ERROR_DOUBLE_CHECK_CONNECTION));
-      return {
-        name: 'Registration error',
-        description: error,
-      };
-    }
-  };
-
-  const Footer = () => (
-    <View style={styles.footer}>
-      <ArrowButton
-        direction="backward"
-        onPress={() => navigation.navigate('RegistrationTwo', {phone: phone})}
-      />
-      <TouchableOpacity onPress={handleRegister}>
-        <ArrowButton
-          direction="forward"
-          disabled={
-            !(
-              form.isValidUsername &&
-              form.isValidPassword &&
-              form.passwordsMatch &&
-              form.tcAccepted
-            )
-          }
-          onPress={handleRegister}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="five" />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <View>
-          <Text style={styles.formHeader}>SIGN UP</Text>
-        </View>
-        <TaggInput
-          accessibilityHint="Enter a username."
-          accessibilityLabel="Username input field."
-          placeholder="Username"
-          autoCompleteType="username"
-          textContentType="username"
-          autoCapitalize="none"
-          returnKeyType="next"
-          onChangeText={handleUsernameUpdate}
-          onSubmitEditing={() => handleFocusChange('password')}
-          blurOnSubmit={false}
-          ref={usernameRef}
-          valid={form.isValidUsername}
-          invalidWarning={
-            'Username must be at least 6 characters and contain only alphanumerics.'
-          }
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
-          accessibilityHint="Enter a password."
-          accessibilityLabel="Password input field."
-          placeholder="Password"
-          autoCompleteType="password"
-          textContentType="oneTimeCode"
-          returnKeyType="next"
-          onChangeText={handlePasswordUpdate}
-          onSubmitEditing={() => handleFocusChange('confirm')}
-          blurOnSubmit={false}
-          secureTextEntry
-          ref={passwordRef}
-          valid={form.isValidPassword}
-          invalidWarning={
-            'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.'
-          }
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
-          accessibilityHint={'Re-enter your password.'}
-          accessibilityLabel={'Password confirmation input field.'}
-          placeholder={'Confirm Password'}
-          autoCompleteType="password"
-          textContentType="oneTimeCode"
-          returnKeyType={form.tcAccepted ? 'go' : 'default'}
-          onChangeText={handleConfirmUpdate}
-          onSubmitEditing={handleRegister}
-          secureTextEntry
-          ref={confirmRef}
-          valid={form.passwordsMatch}
-          invalidWarning={'Passwords must match.'}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <LoadingIndicator />
-        <TermsConditions
-          style={styles.tc}
-          accepted={form.tcAccepted}
-          onChange={handleTcUpdate}
-        />
-      </KeyboardAvoidingView>
-      <Footer />
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
-  formHeader: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: '600',
-    marginBottom: '16%',
-  },
-  tc: {
-    marginVertical: '5%',
-    top: '8%',
-  },
-  load: {
-    top: '5%',
-  },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
-  },
-});
-
-export default RegistrationThree;
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
deleted file mode 100644
index 6d7b2226..00000000
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
-  Alert,
-  Platform,
-  TouchableOpacity,
-  KeyboardAvoidingView,
-} from 'react-native';
-
-import {OnboardingStackParams} from '../../routes';
-
-import {
-  ArrowButton,
-  RegistrationWizard,
-  TaggInput,
-  Background,
-} from '../../components';
-
-import {nameRegex, emailRegex} from '../../constants';
-import {BackgroundGradientType} from '../../types';
-import {ERROR_NEXT_PAGE} from '../../constants/strings';
-
-type RegistrationScreenTwoRouteProp = RouteProp<
-  OnboardingStackParams,
-  'RegistrationTwo'
->;
-type RegistrationScreenTwoNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'RegistrationTwo'
->;
-interface RegistrationTwoProps {
-  route: RegistrationScreenTwoRouteProp;
-  navigation: RegistrationScreenTwoNavigationProp;
-}
-/**
- * Registration screen 2 for First Name and Last Name
- * @param navigation react-navigation navigation object
- */
-const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
-  route,
-  navigation,
-}) => {
-  // refs for changing focus
-  const lnameRef = useRef();
-  const emailRef = useRef();
-
-  const params = route.params;
-  const phone: string = params!.phone;
-  /**
-   * Handles focus change to the next input field.
-   * @param field key for field to move focus onto
-   */
-  const handleFocusChange = (field: string): void => {
-    switch (field) {
-      case 'lname':
-        const lnameField: any = lnameRef.current;
-        lnameField.focus();
-        break;
-      case 'email':
-        const emailField: any = emailRef.current;
-        emailField.focus();
-        break;
-      default:
-        return;
-    }
-  };
-
-  // registration form state
-  const [form, setForm] = useState({
-    fname: '',
-    lname: '',
-    email: '',
-    isValidFname: false,
-    isValidLname: false,
-    isValidEmail: false,
-    attemptedSubmit: false,
-    token: '',
-  });
-
-  /*
-   * Handles changes to the first name field value and verifies the input by updating state and running a validation function.
-   */
-  const handleFnameUpdate = (fname: string) => {
-    fname = fname.trim();
-    let isValidFname: boolean = nameRegex.test(fname);
-    setForm({
-      ...form,
-      fname,
-      isValidFname,
-    });
-  };
-
-  /*
-   * Handles changes to the last name field value and verifies the input by updating state and running a validation function.
-   */
-  const handleLnameUpdate = (lname: string) => {
-    lname = lname.trim();
-    let isValidLname: boolean = nameRegex.test(lname);
-    setForm({
-      ...form,
-      lname,
-      isValidLname,
-    });
-  };
-
-  /*
-   * Handles changes to the email field value and verifies the input by updating state and running a validation function.
-   */
-  const handleEmailUpdate = (email: string) => {
-    email = email.trim();
-    let isValidEmail: boolean = emailRegex.test(email);
-    setForm({
-      ...form,
-      email,
-      isValidEmail,
-    });
-  };
-
-  /**
-   * Handles a click on the "next" arrow button by navigating to RegistrationThree if First Name and Last Name are filled
-   */
-  const goToRegisterThree = async () => {
-    if (!form.attemptedSubmit) {
-      setForm({
-        ...form,
-        attemptedSubmit: true,
-      });
-    }
-    try {
-      if (form.isValidFname && form.isValidLname && form.isValidEmail) {
-        navigation.navigate('RegistrationThree', {
-          firstName: form.fname,
-          lastName: form.lname,
-          email: form.email,
-          phone: phone,
-        });
-      } else {
-        setForm({...form, attemptedSubmit: false});
-        setTimeout(() => setForm({...form, attemptedSubmit: true}));
-      }
-    } catch (error) {
-      Alert.alert(ERROR_NEXT_PAGE);
-      return {
-        name: 'Navigation error',
-        description: error,
-      };
-    }
-  };
-
-  const Footer = () => (
-    <View style={styles.footer}>
-      <ArrowButton
-        direction="backward"
-        onPress={() => navigation.navigate('RegistrationOne')}
-      />
-      <TouchableOpacity onPress={goToRegisterThree}>
-        <ArrowButton
-          direction="forward"
-          disabled={!(form.isValidFname && form.isValidLname)}
-          onPress={goToRegisterThree}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="four" />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <View>
-          <Text style={styles.formHeader}>ENTER NAME</Text>
-        </View>
-        <TaggInput
-          accessibilityHint="Enter your first name."
-          accessibilityLabel="First name input field."
-          placeholder="First Name"
-          autoCompleteType="name"
-          textContentType="name"
-          returnKeyType="next"
-          onChangeText={handleFnameUpdate}
-          onSubmitEditing={() => handleFocusChange('lname')}
-          blurOnSubmit={false}
-          valid={form.isValidFname}
-          invalidWarning="Please enter a valid first name."
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
-          accessibilityHint="Enter your last name."
-          accessibilityLabel="Last name input field."
-          placeholder="Last Name"
-          autoCompleteType="name"
-          textContentType="name"
-          returnKeyType="next"
-          onChangeText={handleLnameUpdate}
-          blurOnSubmit={false}
-          ref={lnameRef}
-          valid={form.isValidLname}
-          invalidWarning="Please enter a valid last name."
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-          onSubmitEditing={goToRegisterThree}
-        />
-        <TaggInput
-          accessibilityHint="Enter your email."
-          accessibilityLabel="Email input field."
-          placeholder="School Email"
-          autoCompleteType="email"
-          textContentType="emailAddress"
-          autoCapitalize="none"
-          returnKeyType="next"
-          keyboardType="email-address"
-          onChangeText={handleEmailUpdate}
-          blurOnSubmit={false}
-          ref={emailRef}
-          valid={form.isValidEmail}
-          invalidWarning={'Please enter a valid email address.'}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-          onSubmitEditing={goToRegisterThree}
-        />
-      </KeyboardAvoidingView>
-      <Footer />
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
-  formHeader: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: '600',
-    marginBottom: '16%',
-  },
-  load: {
-    top: '5%',
-  },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
-  },
-});
-
-export default RegistrationTwo;
diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/SocialMedia.tsx
deleted file mode 100644
index 2a978f94..00000000
--- a/src/screens/onboarding/SocialMedia.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import React from 'react';
-import {
-  KeyboardAvoidingView,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {useDispatch} from 'react-redux';
-import {
-  BackgroundGradientType,
-  CategorySelectionScreenType,
-  LinkerType,
-} from '../..//types';
-import {
-  Background,
-  LinkSocialMedia,
-  RegistrationWizard,
-} from '../../components';
-import {SOCIAL_LIST, MOMENT_CATEGORIES} from '../../constants/';
-import {OnboardingStackParams} from '../../routes';
-
-/**
- * Social Media Screen for displaying social media linkers
- */
-
-type SocialMediaRouteProps = RouteProp<OnboardingStackParams, 'SocialMedia'>;
-
-type SocialMediaNavigationProps = StackNavigationProp<
-  OnboardingStackParams,
-  'SocialMedia'
->;
-
-interface SocialMediaProps {
-  route: SocialMediaRouteProps;
-  navigation: SocialMediaNavigationProps;
-}
-
-const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
-  const {userId, username} = route.params;
-  const linkers: Array<LinkerType> = [];
-
-  //   let numSocials: Number = state.showMore ? 9 : 3;
-
-  for (let i = 0; i < SOCIAL_LIST.length; i++) {
-    let linker: LinkerType = {
-      label: SOCIAL_LIST[i],
-    };
-    linkers.push(linker);
-  }
-
-  /**
-   * Just commenting this out, in case we need it in the future
-   */
-  //   const handleShowPress = () => {
-  //     setState({
-  //       ...state,
-  //       showMore: !state.showMore,
-  //     });
-  //   };
-
-  const handleNext = () => {
-    navigation.navigate('CategorySelection', {
-      screenType: CategorySelectionScreenType.Onboarding,
-      user: {userId: userId, username: username},
-      newCustomCategory: undefined,
-    });
-  };
-
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <StatusBar barStyle="light-content" />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <RegistrationWizard style={styles.wizard} step="seven" />
-        <View style={styles.headerContainer}>
-          <Text style={styles.header}>SOCIAL MEDIA</Text>
-          <Text style={styles.subtext}>
-            Select the social media you want to add
-          </Text>
-        </View>
-        <View style={styles.linkerContainer}>
-          {linkers.map((linker, index) => (
-            <LinkSocialMedia key={index} social={linker} />
-          ))}
-        </View>
-      </KeyboardAvoidingView>
-      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
-        <Text style={styles.nextButtonLabel}>Next</Text>
-      </TouchableOpacity>
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'space-around',
-  },
-  headerContainer: {
-    marginTop: '28%',
-  },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
-  linkerContainer: {
-    bottom: '15%',
-    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: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: '35%',
-    marginHorizontal: '10%',
-  },
-  nextButton: {
-    backgroundColor: '#8F01FF',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#8F01FF',
-    marginBottom: '15%',
-  },
-  nextButtonLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#ddd',
-  },
-});
-
-export default SocialMedia;
diff --git a/src/screens/onboarding/WaitlistSuccessScreen.tsx b/src/screens/onboarding/WaitlistSuccessScreen.tsx
deleted file mode 100644
index 1f603e3a..00000000
--- a/src/screens/onboarding/WaitlistSuccessScreen.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import {StackNavigationProp} from '@react-navigation/stack';
-import * as React from 'react';
-import {
-  KeyboardAvoidingView,
-  Linking,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {ArrowButton, Background, SubmitButton} from '../../components';
-import {OnboardingStackParams} from '../../routes';
-import {BackgroundGradientType} from '../../types';
-import CelebrationLogo from '../../assets/icons/celebration-logo.svg';
-import {SCREEN_HEIGHT} from '../../utils';
-import {TAGG_WEBSITE} from '../../constants';
-
-type WaitlistSuccessScreenProp = StackNavigationProp<
-  OnboardingStackParams,
-  'WaitlistSuccess'
->;
-
-interface WaitlistSuccessScreenProps {
-  navigation: WaitlistSuccessScreenProp;
-}
-
-const WaitlistSuccessScreen: React.FC<WaitlistSuccessScreenProps> = ({
-  navigation,
-}) => {
-  const handleSignIn = () => {
-    navigation.navigate('InvitationCodeVerification');
-  };
-
-  const Footer = () => (
-    <View style={styles.footer}>
-      <ArrowButton
-        direction="backward"
-        onPress={() => navigation.navigate('AddWaitlistUser')}
-      />
-    </View>
-  );
-  return (
-    <Background
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <StatusBar barStyle="light-content" />
-        <CelebrationLogo width={100} height={100} />
-        <Text style={styles.heading}>
-          You've successfully joined{'\n'}
-          the waitlist, we'll let you know{'\n'}
-          as soon as your invite is{'\n'}ready!
-        </Text>
-        <Text style={[styles.subHeading, styles.subHeadOneMargin]}>
-          To learn more about Tagg you can visit our{'\n'}{' '}
-          <Text
-            style={styles.link}
-            onPress={() => {
-              Linking.openURL(TAGG_WEBSITE);
-            }}>
-            website
-          </Text>
-          . Thank you!
-        </Text>
-        <Text style={[styles.subHeading, styles.subHeadTwoMargin]}>
-          Got your invite text?
-        </Text>
-        <TouchableOpacity onPress={handleSignIn} style={styles.finalAction}>
-          <Text style={styles.finalActionLabel}>Sign In</Text>
-        </TouchableOpacity>
-      </KeyboardAvoidingView>
-      <Footer />
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
-  link: {
-    textDecorationLine: 'underline',
-  },
-  finalAction: {
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#fff',
-    marginBottom: SCREEN_HEIGHT / 20,
-    marginTop: SCREEN_HEIGHT / 45,
-  },
-  finalActionLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: 'black',
-  },
-  formHeader: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: '600',
-    marginBottom: '16%',
-  },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
-  },
-  heading: {
-    fontSize: 25,
-    fontWeight: 'bold',
-    color: 'white',
-    marginTop: SCREEN_HEIGHT / 25,
-    textAlign: 'center',
-  },
-  subHeading: {
-    color: 'white',
-    textAlign: 'center',
-  },
-  subHeadOneMargin: {
-    marginTop: SCREEN_HEIGHT / 30,
-  },
-  subHeadTwoMargin: {
-    marginTop: SCREEN_HEIGHT / 10,
-  },
-});
-
-export default WaitlistSuccessScreen;
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 49d7cfb9..bce03bf8 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -1,21 +1,10 @@
-export {default as Login} from './Login';
-export {default as RegistrationOne} from './RegistrationOne';
-export {default as RegistrationTwo} from './RegistrationTwo';
-export {default as RegistrationThree} from './RegistrationThree';
-export {default as Verification} from './Verification';
-export {default as Checkpoint} from './Checkpoint';
-export {default as ProfileOnboarding} from './ProfileOnboarding';
 export {default as InvitationCodeVerification} from './InvitationCodeVerification';
-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';
-export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen';
-export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen';
-export {default as CreateCustomCategory} from './CreateCustomCategory';
-export {default as UpdateRequired} from './UpdateRequired';
+export {default as Login} from './Login';
 export {default as OnboardingStepOne} from './OnboardingStepOne';
-export {default as PhoneVerification} from './PhoneVerification';
-export {default as OnboardingStepTwo} from './OnboardingStepTwo';
 export {default as OnboardingStepThree} from './OnboardingStepThree';
+export {default as OnboardingStepTwo} from './OnboardingStepTwo';
+export {default as PasswordReset} from './PasswordReset';
+export {default as PasswordResetRequest} from './PasswordResetRequest';
+export {default as PhoneVerification} from './PhoneVerification';
+export {default as Verification} from './Verification';
+export {default as WelcomeScreen} from './WelcomeScreen';
diff --git a/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx b/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx
new file mode 100644
index 00000000..489c30f1
--- /dev/null
+++ b/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx
@@ -0,0 +1,237 @@
+import {StackNavigationProp} from '@react-navigation/stack';
+import * as React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  ArrowButton,
+  Background,
+  LoadingIndicator,
+  TaggInput,
+} from '../../components';
+import {nameRegex, phoneRegex} from '../../constants';
+import {OnboardingStackParams} from '../../routes';
+import {adduserToWaitlist} from '../../services';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT} from '../../utils';
+
+type AddWaitlistUserScreenProp = StackNavigationProp<
+  OnboardingStackParams,
+  'AddWaitlistUser'
+>;
+
+interface AddWaitlistUserScreenProps {
+  navigation: AddWaitlistUserScreenProp;
+}
+
+const AddWaitlistUserScreen: React.FC<AddWaitlistUserScreenProps> = ({
+  navigation,
+}) => {
+  const phoneRef = React.useRef();
+  const lnameRef = React.useRef();
+
+  const [form, setForm] = React.useState({
+    phone_number: {value: '', isValid: false},
+    first_name: {value: '', isValid: false},
+    last_name: {value: '', isValid: false},
+    attemptedSubmit: false,
+  });
+
+  //Handlers
+  const handleFocusChange = (field: string): void => {
+    switch (field) {
+      case 'last_name':
+        const lnameField: any = lnameRef.current;
+        lnameField.focus();
+        break;
+      case 'phone_number':
+        const phoneField: any = phoneRef.current;
+        phoneField.focus();
+        break;
+      default:
+        return;
+    }
+  };
+
+  const validate = (value: string, type: string) => {
+    let isValid: boolean = false;
+    switch (type) {
+      case 'phone_number':
+        isValid = phoneRegex.test(value);
+        break;
+      default:
+        isValid = nameRegex.test(value);
+        break;
+    }
+    return isValid;
+  };
+
+  const handleUpdate = (value: string, type: string) => {
+    value = value.trim();
+    const isValid = validate(value, type);
+    setForm({
+      ...form,
+      [type]: {value, isValid},
+    });
+  };
+
+  const handleAddUser = async () => {
+    if (!form.attemptedSubmit) {
+      setForm({
+        ...form,
+        attemptedSubmit: true,
+      });
+    }
+    try {
+      const {phone_number, first_name, last_name} = form;
+      if (phone_number.isValid && first_name.isValid && last_name.isValid) {
+        const success = await adduserToWaitlist(
+          phone_number.value,
+          first_name.value,
+          last_name.value,
+        );
+        if (success) {
+          navigation.navigate('WaitlistSuccess');
+        }
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //Components
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('InvitationCodeVerification')}
+      />
+    </View>
+  );
+
+  const {phone_number, first_name, last_name} = form;
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <View>
+          <Text style={styles.formHeader}>JOIN WAITLIST</Text>
+        </View>
+        <TaggInput
+          accessibilityHint="Enter your first name."
+          accessibilityLabel="First name input field."
+          placeholder="First Name"
+          autoCompleteType="name"
+          textContentType="name"
+          returnKeyType="next"
+          onChangeText={(text) => handleUpdate(text, 'first_name')}
+          onSubmitEditing={() => handleFocusChange('first_name')}
+          blurOnSubmit={false}
+          valid={first_name.isValid}
+          invalidWarning="Please enter a valid first name."
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          accessibilityHint="Enter your last name."
+          accessibilityLabel="Last name input field."
+          placeholder="Last Name"
+          autoCompleteType="name"
+          textContentType="name"
+          returnKeyType="next"
+          onChangeText={(text) => handleUpdate(text, 'last_name')}
+          blurOnSubmit={false}
+          ref={lnameRef}
+          valid={last_name.isValid}
+          invalidWarning="Please enter a valid last name."
+          onSubmitEditing={() => handleFocusChange('phone_number')}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          maxLength={12}
+          accessibilityHint="Enter your phone number."
+          accessibilityLabel="Phone number input field."
+          placeholder="Phone Number"
+          autoCompleteType="tel"
+          textContentType="telephoneNumber"
+          autoCapitalize="none"
+          returnKeyType="next"
+          keyboardType="phone-pad"
+          onChangeText={(text) => handleUpdate(text, 'phone_number')}
+          blurOnSubmit={false}
+          ref={phoneRef}
+          valid={phone_number.isValid}
+          invalidWarning="Please enter a valid 10 digit number."
+          onSubmitEditing={handleAddUser}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TouchableOpacity onPress={handleAddUser} style={styles.finalAction}>
+          <Text style={styles.finalActionLabel}>Submit</Text>
+        </TouchableOpacity>
+        <LoadingIndicator />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  finalAction: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    marginVertical: SCREEN_HEIGHT / 20,
+  },
+  finalActionLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+
+export default AddWaitlistUserScreen;
diff --git a/src/screens/onboarding/legacy/Checkpoint.tsx b/src/screens/onboarding/legacy/Checkpoint.tsx
new file mode 100644
index 00000000..93ff0b7f
--- /dev/null
+++ b/src/screens/onboarding/legacy/Checkpoint.tsx
@@ -0,0 +1,142 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React from 'react';
+import {
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Background, RegistrationWizard} from '../../../components';
+import {OnboardingStackParams} from '../../../routes';
+import {BackgroundGradientType} from '../../../types';
+
+type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>;
+type CheckpointNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'Checkpoint'
+>;
+interface CheckpointProps {
+  route: CheckpointRouteProp;
+  navigation: CheckpointNavigationProp;
+}
+/**
+ * Checkpoint to ask user if profile setup should be done
+ * @param navigation react-navigation navigation object
+ */
+const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
+  const {userId, username} = route.params;
+
+  const handleSkip = () => {
+    navigation.navigate('SocialMedia', {
+      userId: userId,
+      username: username,
+    });
+  };
+
+  const handleProceed = () => {
+    navigation.navigate('ProfileOnboarding', {
+      userId: userId,
+      username: username,
+    });
+  };
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <RegistrationWizard style={styles.wizard} step="six" />
+      <View style={styles.textContainer}>
+        <Text style={styles.header}>You are registered!</Text>
+        <Text style={styles.subtext}>
+          We're almost there. Would you like to setup your profile now?
+        </Text>
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity onPress={handleSkip} style={styles.skipButton}>
+            <Text style={styles.skipButtonLabel}>Do it later</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={handleProceed}
+            style={styles.proceedButton}>
+            <Text style={styles.proceedButtonLabel}>Let's do it!</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  textContainer: {
+    marginTop: '65%',
+  },
+
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  header: {
+    color: '#fff',
+    fontSize: 22,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '4%',
+    marginHorizontal: '10%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '16%',
+    marginHorizontal: '10%',
+  },
+  proceedButton: {
+    backgroundColor: '#8F01FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    marginTop: '5%',
+  },
+  proceedButtonLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#fff',
+  },
+  skipButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    marginTop: '5%',
+  },
+  skipButtonLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+
+export default Checkpoint;
diff --git a/src/screens/onboarding/legacy/ProfileOnboarding.tsx b/src/screens/onboarding/legacy/ProfileOnboarding.tsx
new file mode 100644
index 00000000..bf0863dc
--- /dev/null
+++ b/src/screens/onboarding/legacy/ProfileOnboarding.tsx
@@ -0,0 +1,575 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import moment from 'moment';
+import React, {useMemo} from 'react';
+import {
+  Alert,
+  Image,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import ImagePicker from 'react-native-image-crop-picker';
+import Animated from 'react-native-reanimated';
+import {
+  Background,
+  BirthDatePicker,
+  TaggBigInput,
+  TaggDropDown,
+  TaggInput,
+} from '../../../components';
+import {
+  bioRegex,
+  CLASS_YEAR_LIST,
+  EDIT_PROFILE_ENDPOINT,
+  genderRegex,
+  TAGG_PURPLE,
+  websiteRegex,
+} from '../../../constants';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_PROFILE_CREATION_SHORT,
+  ERROR_SELECT_CLASS_YEAR,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+  ERROR_UPLOAD_LARGE_PROFILE_PIC,
+  ERROR_UPLOAD_SMALL_PROFILE_PIC,
+} from '../../../constants/strings';
+import {OnboardingStackParams} from '../../../routes/onboarding';
+import {BackgroundGradientType} from '../../../types';
+import {SCREEN_WIDTH} from '../../../utils';
+
+type ProfileOnboardingScreenRouteProp = RouteProp<
+  OnboardingStackParams,
+  'ProfileOnboarding'
+>;
+type ProfileOnboardingScreenNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'ProfileOnboarding'
+>;
+interface ProfileOnboardingProps {
+  route: ProfileOnboardingScreenRouteProp;
+  navigation: ProfileOnboardingScreenNavigationProp;
+}
+
+/**
+ * Create profile screen for onboarding.
+ * @param navigation react-navigation navigation object
+ */
+
+const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
+  route,
+  navigation,
+}) => {
+  const {userId, username} = route.params;
+  let emptyDate: string | undefined;
+  const [form, setForm] = React.useState({
+    largePic: '',
+    smallPic: '',
+    website: '',
+    bio: '',
+    birthdate: emptyDate,
+    gender: '',
+    isValidWebsite: true,
+    isValidBio: true,
+    isValidGender: true,
+    attemptedSubmit: false,
+    token: '',
+    classYear: -1,
+  });
+  const [customGender, setCustomGender] = React.useState(Boolean);
+
+  // refs for changing focus
+  const bioRef = React.useRef();
+  const birthdateRef = React.useRef();
+  const genderRef = React.useRef();
+  const customGenderRef = React.useRef();
+  /**
+   * Handles focus change to the next input field.
+   * @param field key for field to move focus onto
+   */
+  const handleFocusChange = (field: string): void => {
+    switch (field) {
+      case 'bio':
+        const bioField: any = bioRef.current;
+        bioField.focus();
+        break;
+      case 'birthdate':
+        const birthdateField: any = birthdateRef.current;
+        birthdateField.focus();
+        break;
+      case 'gender':
+        const genderField: any = genderRef.current;
+        genderField.focus();
+        break;
+      case 'customGender':
+        const customGenderField: any = customGenderRef.current;
+        customGenderField.focus();
+        break;
+      default:
+        return;
+    }
+  };
+
+  var classYearList: Array<any> = [];
+
+  CLASS_YEAR_LIST.map((value) => {
+    classYearList.push({label: value, value: value});
+  });
+
+  /**
+   * Profile screen "Add header image" button
+   */
+  const LargeProfilePic = () => (
+    <TouchableOpacity
+      accessible={true}
+      accessibilityLabel="ADD HEADER IMAGE"
+      onPress={goToGalleryLargePic}
+      style={styles.largeProfileUploader}>
+      {form.largePic ? (
+        <Image source={{uri: form.largePic}} style={styles.largeProfilePic} />
+      ) : (
+        <Text style={styles.largeProfileText}>ADD HEADER IMAGE</Text>
+      )}
+    </TouchableOpacity>
+  );
+
+  /**
+   * Profile screen "Add profile picture" button
+   */
+  const SmallProfilePic = () => (
+    <TouchableOpacity
+      accessible={true}
+      accessibilityLabel="ADD PROFILE PICTURE"
+      onPress={goToGallerySmallPic}
+      style={styles.smallProfileUploader}>
+      {form.smallPic ? (
+        <Image source={{uri: form.smallPic}} style={styles.smallProfilePic} />
+      ) : (
+        <Text style={styles.smallProfileText}>ADD PROFILE PICTURE</Text>
+      )}
+    </TouchableOpacity>
+  );
+
+  const goToGalleryLargePic = () => {
+    ImagePicker.openPicker({
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperToolbarTitle: 'Select Header',
+      mediaType: 'photo',
+    }).then((picture) => {
+      if ('path' in picture) {
+        setForm({
+          ...form,
+          largePic: picture.path,
+        });
+      }
+    });
+  };
+
+  const goToGallerySmallPic = () => {
+    ImagePicker.openPicker({
+      smartAlbums: [
+        'Favorites',
+        'RecentlyAdded',
+        'SelfPortraits',
+        'Screenshots',
+        'UserLibrary',
+      ],
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperToolbarTitle: 'Select Profile Picture',
+      mediaType: 'photo',
+      cropperCircleOverlay: true,
+    }).then((picture) => {
+      if ('path' in picture) {
+        setForm({
+          ...form,
+          smallPic: picture.path,
+        });
+      }
+    });
+  };
+
+  /*
+   * Handles changes to the website field value and verifies the input by updating state and running a validation function.
+   */
+  const handleWebsiteUpdate = (website: string) => {
+    website = website.trim();
+    let isValidWebsite: boolean = websiteRegex.test(website);
+    setForm({
+      ...form,
+      website,
+      isValidWebsite,
+    });
+  };
+
+  /*
+   * Handles changes to the bio field value and verifies the input by updating state and running a validation function.
+   */
+  const handleBioUpdate = (bio: string) => {
+    let isValidBio: boolean = bioRegex.test(bio);
+    setForm({
+      ...form,
+      bio,
+      isValidBio,
+    });
+  };
+
+  const handleGenderUpdate = (gender: string) => {
+    if (gender === 'custom') {
+      setCustomGender(true);
+    } else {
+      setCustomGender(false);
+      let isValidGender: boolean = true;
+      setForm({
+        ...form,
+        gender,
+        isValidGender,
+      });
+    }
+  };
+
+  const handleClassYearUpdate = (value: string) => {
+    const classYear = Number.parseInt(value);
+    setForm({
+      ...form,
+      classYear,
+    });
+  };
+
+  const handleCustomGenderUpdate = (gender: string) => {
+    let isValidGender: boolean = genderRegex.test(gender);
+    gender = gender.replace(' ', '-');
+    setForm({
+      ...form,
+      gender,
+      isValidGender,
+    });
+  };
+
+  const handleBirthdateUpdate = (birthdate: Date) => {
+    setForm({
+      ...form,
+      birthdate: birthdate && moment(birthdate).format('YYYY-MM-DD'),
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!form.largePic) {
+      Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC);
+      return;
+    }
+    if (!form.smallPic) {
+      Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC);
+      return;
+    }
+    if (form.classYear === -1) {
+      Alert.alert(ERROR_SELECT_CLASS_YEAR);
+      return;
+    }
+    if (!form.attemptedSubmit) {
+      setForm({
+        ...form,
+        attemptedSubmit: true,
+      });
+    }
+    let invalidFields: boolean = false;
+    const request = new FormData();
+    if (form.largePic) {
+      request.append('largeProfilePicture', {
+        uri: form.largePic,
+        name: 'large_profile_pic.jpg',
+        type: 'image/jpg',
+      });
+    }
+    if (form.smallPic) {
+      request.append('smallProfilePicture', {
+        uri: form.smallPic,
+        name: 'small_profile_pic.jpg',
+        type: 'image/jpg',
+      });
+    }
+    if (form.website) {
+      if (form.isValidWebsite) {
+        request.append('website', form.website);
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+        invalidFields = true;
+      }
+    }
+
+    if (form.bio) {
+      if (form.isValidBio) {
+        request.append('biography', form.bio);
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+        invalidFields = true;
+      }
+    }
+
+    if (form.birthdate) {
+      request.append('birthday', form.birthdate);
+    }
+
+    if (customGender) {
+      if (form.isValidGender) {
+        request.append('gender', form.gender);
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+        invalidFields = true;
+      }
+    } else {
+      if (form.isValidGender) {
+        request.append('gender', form.gender);
+      }
+    }
+
+    if (form.classYear !== -1) {
+      request.append('university_class', form.classYear);
+    }
+
+    if (invalidFields) {
+      return;
+    }
+
+    const endpoint = EDIT_PROFILE_ENDPOINT + `${userId}/`;
+    try {
+      const token = await AsyncStorage.getItem('token');
+      let response = await fetch(endpoint, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: 'Token ' + token,
+        },
+        body: request,
+      });
+      let statusCode = response.status;
+      let data = await response.json();
+      if (statusCode === 200) {
+        navigation.navigate('SocialMedia', {
+          userId: userId,
+          username: username,
+        });
+      } else if (statusCode === 400) {
+        Alert.alert(
+          'Profile update failed. 😔',
+          data.error || 'Something went wrong! 😭',
+        );
+      } else {
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+      }
+    } catch (error) {
+      Alert.alert(ERROR_PROFILE_CREATION_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
+      return {
+        name: 'Profile creation error',
+        description: error,
+      };
+    }
+  };
+
+  const profilePics = useMemo(() => {
+    return (
+      <View style={styles.profile}>
+        <LargeProfilePic />
+        <SmallProfilePic />
+      </View>
+    );
+  }, [form.largePic, form.smallPic]);
+
+  return (
+    <Animated.ScrollView bounces={false}>
+      <Background
+        centered
+        gradientType={BackgroundGradientType.Light}
+        style={styles.container}>
+        <StatusBar barStyle="light-content" />
+        {profilePics}
+        <View style={styles.contentContainer}>
+          <TaggInput
+            accessibilityHint="Enter a website."
+            accessibilityLabel="Website input field."
+            placeholder="Website"
+            autoCompleteType="off"
+            textContentType="URL"
+            autoCapitalize="none"
+            returnKeyType="next"
+            onChangeText={handleWebsiteUpdate}
+            onSubmitEditing={() => handleFocusChange('bio')}
+            blurOnSubmit={false}
+            valid={form.isValidWebsite}
+            attemptedSubmit={form.attemptedSubmit}
+            invalidWarning={'Website must be a valid link to your website'}
+            width={280}
+          />
+          <TaggBigInput
+            accessibilityHint="Enter a bio."
+            accessibilityLabel="Bio input field."
+            placeholder="Bio"
+            autoCompleteType="off"
+            textContentType="none"
+            autoCapitalize="none"
+            returnKeyType="next"
+            onChangeText={handleBioUpdate}
+            onSubmitEditing={() => handleFocusChange('bio')}
+            blurOnSubmit={false}
+            ref={bioRef}
+            valid={form.isValidBio}
+            attemptedSubmit={form.attemptedSubmit}
+            invalidWarning={
+              'Bio must be less than 150 characters and must contain valid characters'
+            }
+            width={280}
+          />
+          <BirthDatePicker
+            ref={birthdateRef}
+            handleBDUpdate={handleBirthdateUpdate}
+            width={280}
+            date={form.birthdate}
+            showPresetdate={false}
+          />
+          <TaggDropDown
+            onValueChange={(value: string) => handleClassYearUpdate(value)}
+            items={classYearList}
+            placeholder={{
+              label: 'Class Year',
+              value: null,
+              color: '#ddd',
+            }}
+          />
+          {customGender && (
+            <TaggInput
+              accessibilityHint="Custom"
+              accessibilityLabel="Gender input field."
+              placeholder="Enter your gender"
+              autoCompleteType="off"
+              textContentType="none"
+              autoCapitalize="none"
+              returnKeyType="next"
+              blurOnSubmit={false}
+              ref={customGenderRef}
+              onChangeText={handleCustomGenderUpdate}
+              onSubmitEditing={() => handleSubmit()}
+              valid={form.isValidGender}
+              attemptedSubmit={form.attemptedSubmit}
+              invalidWarning={
+                'Custom field can only contain letters and hyphens'
+              }
+              width={280}
+            />
+          )}
+          <TaggDropDown
+            onValueChange={(value: string) => handleGenderUpdate(value)}
+            items={[
+              {label: 'Male', value: 'male'},
+              {label: 'Female', value: 'female'},
+              {label: 'Custom', value: 'custom'},
+            ]}
+            placeholder={{
+              label: 'Gender',
+              value: null,
+              color: '#ddd',
+            }}
+          />
+          <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
+            <Text style={styles.submitBtnLabel}>Let's start!</Text>
+          </TouchableOpacity>
+        </View>
+      </Background>
+    </Animated.ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginBottom: '10%',
+  },
+  profile: {
+    flexDirection: 'row',
+    marginBottom: '5%',
+  },
+  contentContainer: {
+    position: 'relative',
+    width: 280,
+    alignSelf: 'center',
+  },
+  largeProfileUploader: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#fff',
+    marginLeft: '13%',
+    marginTop: '10%',
+    height: 230,
+    width: 230,
+    borderRadius: 23,
+  },
+  largeProfileText: {
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#863FF9',
+  },
+  largeProfilePic: {
+    height: 230,
+    width: 230,
+    borderRadius: 23,
+  },
+  smallProfileUploader: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: '#E1F0FF',
+    right: '18%',
+    marginTop: '38%',
+    height: 110,
+    width: 110,
+    borderRadius: 55,
+  },
+  smallProfileText: {
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#806DF4',
+  },
+  smallProfilePic: {
+    height: 110,
+    width: 110,
+    borderRadius: 55,
+  },
+  submitBtn: {
+    backgroundColor: TAGG_PURPLE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH / 2.5,
+    height: SCREEN_WIDTH / 10,
+    borderRadius: 5,
+    marginTop: '5%',
+    alignSelf: 'center',
+    marginBottom: SCREEN_WIDTH / 3,
+  },
+  submitBtnLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#fff',
+  },
+});
+
+export default ProfileOnboarding;
diff --git a/src/screens/onboarding/legacy/RegistrationOne.tsx b/src/screens/onboarding/legacy/RegistrationOne.tsx
new file mode 100644
index 00000000..4bcc2720
--- /dev/null
+++ b/src/screens/onboarding/legacy/RegistrationOne.tsx
@@ -0,0 +1,211 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useRef, useState} from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {trackPromise} from 'react-promise-tracker';
+import {
+  ArrowButton,
+  Background,
+  LoadingIndicator,
+  RegistrationWizard,
+  TaggInput,
+} from '../../../components';
+import {phoneRegex, SEND_OTP_ENDPOINT} from '../../../constants';
+import {
+  ERROR_EMAIL_IN_USE,
+  ERROR_SERVER_DOWN,
+} from '../../../constants/strings';
+import {OnboardingStackParams} from '../../../routes';
+import {BackgroundGradientType, VerificationScreenType} from '../../../types';
+
+type RegistrationScreenOneRouteProp = RouteProp<
+  OnboardingStackParams,
+  'RegistrationOne'
+>;
+type RegistrationScreenOneNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'RegistrationOne'
+>;
+interface RegistrationOneProps {
+  route: RegistrationScreenOneRouteProp;
+  navigation: RegistrationScreenOneNavigationProp;
+}
+/**
+ * Registration screen 1 for Email
+ * @param navigation react-navigation navigation object
+ */
+const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
+  // // refs for changing focus
+  const phoneRef = useRef();
+
+  // registration form state
+  const [form, setForm] = useState({
+    phone_number: '',
+    isValidPhone: false,
+    attemptedSubmit: false,
+  });
+
+  /*
+   * Handles changes to the email field value and verifies the input by updating state and running a validation function.
+   */
+  const handlePhoneUpdate = (phone_number: string) => {
+    phone_number = phone_number.trim();
+    let isValidPhone: boolean = phoneRegex.test(phone_number);
+    setForm({
+      ...form,
+      phone_number,
+      isValidPhone,
+    });
+  };
+
+  /**
+   * Handles a click on the "next" arrow button by navigating to Verification if email is filled correctly
+   */
+  const goToVerification = async () => {
+    if (!form.attemptedSubmit) {
+      setForm({
+        ...form,
+        attemptedSubmit: true,
+      });
+    }
+    try {
+      if (form.isValidPhone) {
+        let sendOtpResponse = await trackPromise(
+          fetch(SEND_OTP_ENDPOINT, {
+            method: 'POST',
+            body: JSON.stringify({
+              phone_number: '+1' + form.phone_number,
+            }),
+          }),
+        );
+        let otpStatusCode = sendOtpResponse.status;
+        if (otpStatusCode === 200) {
+          navigation.navigate('Verification', {
+            id: form.phone_number,
+            screenType: VerificationScreenType.Phone,
+          });
+        } else if (otpStatusCode === 409) {
+          Alert.alert(ERROR_EMAIL_IN_USE);
+        } else {
+          Alert.alert(ERROR_SERVER_DOWN);
+        }
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+      }
+    } catch (error) {
+      Alert.alert(
+        'Looks like our servers are down. 😓',
+        "Try again in a couple minutes. We're sorry for the inconvenience.",
+      );
+      return {
+        name: 'Send OTP error',
+        description: error,
+      };
+    }
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('Login')}
+      />
+      <TouchableOpacity onPress={goToVerification}>
+        <ArrowButton
+          direction="forward"
+          disabled={!form.isValidPhone}
+          onPress={goToVerification}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <RegistrationWizard style={styles.wizard} step="two" />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <View>
+          <Text style={styles.formHeader}>ENTER PHONE NUMBER</Text>
+        </View>
+        <TaggInput
+          maxLength={10} // currently only support US phone numbers
+          accessibilityHint="Enter your phone number."
+          accessibilityLabel="Phone number input field."
+          placeholder="Phone Number"
+          autoCompleteType="tel"
+          textContentType="telephoneNumber"
+          autoCapitalize="none"
+          returnKeyType="next"
+          keyboardType="number-pad"
+          onChangeText={handlePhoneUpdate}
+          blurOnSubmit={false}
+          ref={phoneRef}
+          valid={form.isValidPhone}
+          invalidWarning={'Please enter a valid 10 digit number.'}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+          onSubmitEditing={goToVerification}
+        />
+        <LoadingIndicator />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  load: {
+    top: '5%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+
+export default RegistrationOne;
diff --git a/src/screens/onboarding/legacy/RegistrationThree.tsx b/src/screens/onboarding/legacy/RegistrationThree.tsx
new file mode 100644
index 00000000..1f4266ff
--- /dev/null
+++ b/src/screens/onboarding/legacy/RegistrationThree.tsx
@@ -0,0 +1,363 @@
+/**
+ * Author : Ashm Walia
+ * Purpose : Add a new screen to allow the user to enter first and last name
+ */
+
+import AsyncStorage from '@react-native-community/async-storage';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useRef, useState} from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  ArrowButton,
+  Background,
+  LoadingIndicator,
+  RegistrationWizard,
+  TaggInput,
+  TermsConditions,
+} from '../../components';
+import {passwordRegex, REGISTER_ENDPOINT, usernameRegex} from '../../constants';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_REGISTRATION,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+} from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
+
+type RegistrationScreenThreeRouteProp = RouteProp<
+  OnboardingStackParams,
+  'RegistrationThree'
+>;
+type RegistrationScreenThreeNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'RegistrationThree'
+>;
+interface RegistrationThreeProps {
+  route: RegistrationScreenThreeRouteProp;
+  navigation: RegistrationScreenThreeNavigationProp;
+}
+/**
+ * Registration screen 3 for username, password, and terms and conditions
+ * @param navigation react-navigation navigation object
+ */
+const RegistrationThree: React.FC<RegistrationThreeProps> = ({
+  route,
+  navigation,
+}) => {
+  // refs for changing focus
+  const usernameRef = useRef();
+  const passwordRef = useRef();
+  const confirmRef = useRef();
+
+  const registrationName = route.params;
+  const fname: string = registrationName!.firstName;
+  const lname: string = registrationName!.lastName;
+  const phone: string = registrationName!.phone;
+  const email: string = registrationName!.email;
+
+  /**
+   * Handles focus change to the next input field.
+   * @param field key for field to move focus onto
+   */
+  const handleFocusChange = (field: string): void => {
+    switch (field) {
+      case 'username':
+        const usernameField: any = usernameRef.current;
+        usernameField.focus();
+        break;
+      case 'password':
+        const passwordField: any = passwordRef.current;
+        passwordField.focus();
+        break;
+      case 'confirm':
+        const confirmField: any = confirmRef.current;
+        confirmField.focus();
+        break;
+      default:
+        return;
+    }
+  };
+
+  // registration form state
+  const [form, setForm] = useState({
+    phone: '',
+    username: '',
+    password: '',
+    confirm: '',
+    isValidPhone: false,
+    isValidUsername: false,
+    isValidPassword: false,
+    passwordsMatch: false,
+    tcAccepted: false,
+    attemptedSubmit: false,
+  });
+
+  /*
+   * Handles changes to the username field value and verifies the input by updating state and running a validation function.
+   */
+  const handleUsernameUpdate = (username: string) => {
+    let isValidUsername: boolean = usernameRegex.test(username);
+    setForm({
+      ...form,
+      username,
+      isValidUsername,
+    });
+  };
+  /*
+   * Handles changes to the password field value and verifies the input by updating state and running a validation function.
+   */
+  const handlePasswordUpdate = (password: string) => {
+    let isValidPassword: boolean = passwordRegex.test(password);
+    let passwordsMatch: boolean = form.password === form.confirm;
+    setForm({
+      ...form,
+      password,
+      isValidPassword,
+      passwordsMatch,
+    });
+  };
+
+  /*
+   * Handles changes to the confirm password field value and verifies the input by updating state and running a validation function.
+   */
+  const handleConfirmUpdate = (confirm: string) => {
+    let passwordsMatch: boolean = form.password === confirm;
+    setForm({
+      ...form,
+      confirm,
+      passwordsMatch,
+    });
+  };
+
+  /**
+   * Handles changes to the terms and conditions accepted boolean.
+   * @param tcAccepted the boolean to set the terms and conditions value to
+   */
+  const handleTcUpdate = (tcAccepted: boolean) => {
+    setForm({
+      ...form,
+      tcAccepted,
+    });
+  };
+
+  /**
+   * Handles a click on the "next" arrow button by sending an API request to the backend and displaying the appropriate response.
+   */
+  const handleRegister = async () => {
+    if (!form.attemptedSubmit) {
+      setForm({
+        ...form,
+        attemptedSubmit: true,
+      });
+    }
+    try {
+      if (form.isValidUsername && form.isValidPassword && form.passwordsMatch) {
+        if (form.tcAccepted) {
+          let registerResponse = await fetch(REGISTER_ENDPOINT, {
+            method: 'POST',
+            body: JSON.stringify({
+              first_name: fname,
+              last_name: lname,
+              email: email,
+              phone_number: phone,
+              username: form.username,
+              password: form.password,
+            }),
+          });
+          let statusCode = registerResponse.status;
+          let data = await registerResponse.json();
+          const userId: string = data.UserID;
+          if (statusCode === 201) {
+            try {
+              await AsyncStorage.setItem('token', data.token);
+              /*
+               * Skipping navigation to Checkpoint for alpha
+               * navigation.navigate('Checkpoint', { userId: userId, username: form.username });
+               */
+              navigation.navigate('ProfileOnboarding', {
+                userId: userId,
+                username: form.username,
+              });
+            } catch (err) {
+              console.log(err);
+            }
+          } else if (statusCode === 409) {
+            Alert.alert(ERROR_REGISTRATION(data));
+          } else {
+            Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+          }
+        } else {
+          Alert.alert(
+            'Terms and conditions',
+            'You must first agree to the terms and conditions.',
+          );
+        }
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+      }
+    } catch (error) {
+      Alert.alert(ERROR_REGISTRATION(ERROR_DOUBLE_CHECK_CONNECTION));
+      return {
+        name: 'Registration error',
+        description: error,
+      };
+    }
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('RegistrationTwo', {phone: phone})}
+      />
+      <TouchableOpacity onPress={handleRegister}>
+        <ArrowButton
+          direction="forward"
+          disabled={
+            !(
+              form.isValidUsername &&
+              form.isValidPassword &&
+              form.passwordsMatch &&
+              form.tcAccepted
+            )
+          }
+          onPress={handleRegister}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <RegistrationWizard style={styles.wizard} step="five" />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <View>
+          <Text style={styles.formHeader}>SIGN UP</Text>
+        </View>
+        <TaggInput
+          accessibilityHint="Enter a username."
+          accessibilityLabel="Username input field."
+          placeholder="Username"
+          autoCompleteType="username"
+          textContentType="username"
+          autoCapitalize="none"
+          returnKeyType="next"
+          onChangeText={handleUsernameUpdate}
+          onSubmitEditing={() => handleFocusChange('password')}
+          blurOnSubmit={false}
+          ref={usernameRef}
+          valid={form.isValidUsername}
+          invalidWarning={
+            'Username must be at least 6 characters and contain only alphanumerics.'
+          }
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          accessibilityHint="Enter a password."
+          accessibilityLabel="Password input field."
+          placeholder="Password"
+          autoCompleteType="password"
+          textContentType="oneTimeCode"
+          returnKeyType="next"
+          onChangeText={handlePasswordUpdate}
+          onSubmitEditing={() => handleFocusChange('confirm')}
+          blurOnSubmit={false}
+          secureTextEntry
+          ref={passwordRef}
+          valid={form.isValidPassword}
+          invalidWarning={
+            'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.'
+          }
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          accessibilityHint={'Re-enter your password.'}
+          accessibilityLabel={'Password confirmation input field.'}
+          placeholder={'Confirm Password'}
+          autoCompleteType="password"
+          textContentType="oneTimeCode"
+          returnKeyType={form.tcAccepted ? 'go' : 'default'}
+          onChangeText={handleConfirmUpdate}
+          onSubmitEditing={handleRegister}
+          secureTextEntry
+          ref={confirmRef}
+          valid={form.passwordsMatch}
+          invalidWarning={'Passwords must match.'}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <LoadingIndicator />
+        <TermsConditions
+          style={styles.tc}
+          accepted={form.tcAccepted}
+          onChange={handleTcUpdate}
+        />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  tc: {
+    marginVertical: '5%',
+    top: '8%',
+  },
+  load: {
+    top: '5%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+
+export default RegistrationThree;
diff --git a/src/screens/onboarding/legacy/RegistrationTwo.tsx b/src/screens/onboarding/legacy/RegistrationTwo.tsx
new file mode 100644
index 00000000..2dd86f90
--- /dev/null
+++ b/src/screens/onboarding/legacy/RegistrationTwo.tsx
@@ -0,0 +1,275 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useRef, useState} from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  ArrowButton,
+  Background,
+  RegistrationWizard,
+  TaggInput,
+} from '../../components';
+import {emailRegex, nameRegex} from '../../constants';
+import {ERROR_NEXT_PAGE} from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
+
+type RegistrationScreenTwoRouteProp = RouteProp<
+  OnboardingStackParams,
+  'RegistrationTwo'
+>;
+type RegistrationScreenTwoNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'RegistrationTwo'
+>;
+interface RegistrationTwoProps {
+  route: RegistrationScreenTwoRouteProp;
+  navigation: RegistrationScreenTwoNavigationProp;
+}
+/**
+ * Registration screen 2 for First Name and Last Name
+ * @param navigation react-navigation navigation object
+ */
+const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
+  route,
+  navigation,
+}) => {
+  // refs for changing focus
+  const lnameRef = useRef();
+  const emailRef = useRef();
+
+  const params = route.params;
+  const phone: string = params!.phone;
+  /**
+   * Handles focus change to the next input field.
+   * @param field key for field to move focus onto
+   */
+  const handleFocusChange = (field: string): void => {
+    switch (field) {
+      case 'lname':
+        const lnameField: any = lnameRef.current;
+        lnameField.focus();
+        break;
+      case 'email':
+        const emailField: any = emailRef.current;
+        emailField.focus();
+        break;
+      default:
+        return;
+    }
+  };
+
+  // registration form state
+  const [form, setForm] = useState({
+    fname: '',
+    lname: '',
+    email: '',
+    isValidFname: false,
+    isValidLname: false,
+    isValidEmail: false,
+    attemptedSubmit: false,
+    token: '',
+  });
+
+  /*
+   * Handles changes to the first name field value and verifies the input by updating state and running a validation function.
+   */
+  const handleFnameUpdate = (fname: string) => {
+    fname = fname.trim();
+    let isValidFname: boolean = nameRegex.test(fname);
+    setForm({
+      ...form,
+      fname,
+      isValidFname,
+    });
+  };
+
+  /*
+   * Handles changes to the last name field value and verifies the input by updating state and running a validation function.
+   */
+  const handleLnameUpdate = (lname: string) => {
+    lname = lname.trim();
+    let isValidLname: boolean = nameRegex.test(lname);
+    setForm({
+      ...form,
+      lname,
+      isValidLname,
+    });
+  };
+
+  /*
+   * Handles changes to the email field value and verifies the input by updating state and running a validation function.
+   */
+  const handleEmailUpdate = (email: string) => {
+    email = email.trim();
+    let isValidEmail: boolean = emailRegex.test(email);
+    setForm({
+      ...form,
+      email,
+      isValidEmail,
+    });
+  };
+
+  /**
+   * Handles a click on the "next" arrow button by navigating to RegistrationThree if First Name and Last Name are filled
+   */
+  const goToRegisterThree = async () => {
+    if (!form.attemptedSubmit) {
+      setForm({
+        ...form,
+        attemptedSubmit: true,
+      });
+    }
+    try {
+      if (form.isValidFname && form.isValidLname && form.isValidEmail) {
+        navigation.navigate('RegistrationThree', {
+          firstName: form.fname,
+          lastName: form.lname,
+          email: form.email,
+          phone: phone,
+        });
+      } else {
+        setForm({...form, attemptedSubmit: false});
+        setTimeout(() => setForm({...form, attemptedSubmit: true}));
+      }
+    } catch (error) {
+      Alert.alert(ERROR_NEXT_PAGE);
+      return {
+        name: 'Navigation error',
+        description: error,
+      };
+    }
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('RegistrationOne')}
+      />
+      <TouchableOpacity onPress={goToRegisterThree}>
+        <ArrowButton
+          direction="forward"
+          disabled={!(form.isValidFname && form.isValidLname)}
+          onPress={goToRegisterThree}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <RegistrationWizard style={styles.wizard} step="four" />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <View>
+          <Text style={styles.formHeader}>ENTER NAME</Text>
+        </View>
+        <TaggInput
+          accessibilityHint="Enter your first name."
+          accessibilityLabel="First name input field."
+          placeholder="First Name"
+          autoCompleteType="name"
+          textContentType="name"
+          returnKeyType="next"
+          onChangeText={handleFnameUpdate}
+          onSubmitEditing={() => handleFocusChange('lname')}
+          blurOnSubmit={false}
+          valid={form.isValidFname}
+          invalidWarning="Please enter a valid first name."
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
+          accessibilityHint="Enter your last name."
+          accessibilityLabel="Last name input field."
+          placeholder="Last Name"
+          autoCompleteType="name"
+          textContentType="name"
+          returnKeyType="next"
+          onChangeText={handleLnameUpdate}
+          blurOnSubmit={false}
+          ref={lnameRef}
+          valid={form.isValidLname}
+          invalidWarning="Please enter a valid last name."
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+          onSubmitEditing={goToRegisterThree}
+        />
+        <TaggInput
+          accessibilityHint="Enter your email."
+          accessibilityLabel="Email input field."
+          placeholder="School Email"
+          autoCompleteType="email"
+          textContentType="emailAddress"
+          autoCapitalize="none"
+          returnKeyType="next"
+          keyboardType="email-address"
+          onChangeText={handleEmailUpdate}
+          blurOnSubmit={false}
+          ref={emailRef}
+          valid={form.isValidEmail}
+          invalidWarning={'Please enter a valid email address.'}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+          onSubmitEditing={goToRegisterThree}
+        />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  load: {
+    top: '5%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+
+export default RegistrationTwo;
diff --git a/src/screens/onboarding/legacy/SocialMedia.tsx b/src/screens/onboarding/legacy/SocialMedia.tsx
new file mode 100644
index 00000000..db24830a
--- /dev/null
+++ b/src/screens/onboarding/legacy/SocialMedia.tsx
@@ -0,0 +1,161 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  Background,
+  LinkSocialMedia,
+  RegistrationWizard,
+} from '../../../components';
+import {SOCIAL_LIST} from '../../../constants';
+import {OnboardingStackParams} from '../../../routes';
+import {
+  BackgroundGradientType,
+  CategorySelectionScreenType,
+  LinkerType,
+} from '../../../types';
+
+/**
+ * Social Media Screen for displaying social media linkers
+ */
+
+type SocialMediaRouteProps = RouteProp<OnboardingStackParams, 'SocialMedia'>;
+
+type SocialMediaNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'SocialMedia'
+>;
+
+interface SocialMediaProps {
+  route: SocialMediaRouteProps;
+  navigation: SocialMediaNavigationProps;
+}
+
+const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
+  const {userId, username} = route.params;
+  const linkers: Array<LinkerType> = [];
+
+  //   let numSocials: Number = state.showMore ? 9 : 3;
+
+  for (let i = 0; i < SOCIAL_LIST.length; i++) {
+    let linker: LinkerType = {
+      label: SOCIAL_LIST[i],
+    };
+    linkers.push(linker);
+  }
+
+  /**
+   * Just commenting this out, in case we need it in the future
+   */
+  //   const handleShowPress = () => {
+  //     setState({
+  //       ...state,
+  //       showMore: !state.showMore,
+  //     });
+  //   };
+
+  const handleNext = () => {
+    navigation.navigate('CategorySelection', {
+      screenType: CategorySelectionScreenType.Onboarding,
+      user: {userId: userId, username: username},
+      newCustomCategory: undefined,
+    });
+  };
+
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <StatusBar barStyle="light-content" />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <RegistrationWizard style={styles.wizard} step="seven" />
+        <View style={styles.headerContainer}>
+          <Text style={styles.header}>SOCIAL MEDIA</Text>
+          <Text style={styles.subtext}>
+            Select the social media you want to add
+          </Text>
+        </View>
+        <View style={styles.linkerContainer}>
+          {linkers.map((linker, index) => (
+            <LinkSocialMedia key={index} social={linker} />
+          ))}
+        </View>
+      </KeyboardAvoidingView>
+      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
+        <Text style={styles.nextButtonLabel}>Next</Text>
+      </TouchableOpacity>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  headerContainer: {
+    marginTop: '28%',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  linkerContainer: {
+    bottom: '15%',
+    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: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '35%',
+    marginHorizontal: '10%',
+  },
+  nextButton: {
+    backgroundColor: '#8F01FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#8F01FF',
+    marginBottom: '15%',
+  },
+  nextButtonLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+
+export default SocialMedia;
diff --git a/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx b/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx
new file mode 100644
index 00000000..72bbec63
--- /dev/null
+++ b/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx
@@ -0,0 +1,156 @@
+import {StackNavigationProp} from '@react-navigation/stack';
+import * as React from 'react';
+import {
+  KeyboardAvoidingView,
+  Linking,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ArrowButton, Background} from '../../../components';
+import {TAGG_WEBSITE} from '../../../constants';
+import {OnboardingStackParams} from '../../../routes';
+import {BackgroundGradientType} from '../../../types';
+import {SCREEN_HEIGHT} from '../../../utils';
+import CelebrationLogo from '../../assets/icons/celebration-logo.svg';
+
+type WaitlistSuccessScreenProp = StackNavigationProp<
+  OnboardingStackParams,
+  'WaitlistSuccess'
+>;
+
+interface WaitlistSuccessScreenProps {
+  navigation: WaitlistSuccessScreenProp;
+}
+
+const WaitlistSuccessScreen: React.FC<WaitlistSuccessScreenProps> = ({
+  navigation,
+}) => {
+  const handleSignIn = () => {
+    navigation.navigate('InvitationCodeVerification');
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('AddWaitlistUser')}
+      />
+    </View>
+  );
+  return (
+    <Background
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <StatusBar barStyle="light-content" />
+        <CelebrationLogo width={100} height={100} />
+        <Text style={styles.heading}>
+          You've successfully joined{'\n'}
+          the waitlist, we'll let you know{'\n'}
+          as soon as your invite is{'\n'}ready!
+        </Text>
+        <Text style={[styles.subHeading, styles.subHeadOneMargin]}>
+          To learn more about Tagg you can visit our{'\n'}{' '}
+          <Text
+            style={styles.link}
+            onPress={() => {
+              Linking.openURL(TAGG_WEBSITE);
+            }}>
+            website
+          </Text>
+          . Thank you!
+        </Text>
+        <Text style={[styles.subHeading, styles.subHeadTwoMargin]}>
+          Got your invite text?
+        </Text>
+        <TouchableOpacity onPress={handleSignIn} style={styles.finalAction}>
+          <Text style={styles.finalActionLabel}>Sign In</Text>
+        </TouchableOpacity>
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+  finalAction: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    marginBottom: SCREEN_HEIGHT / 20,
+    marginTop: SCREEN_HEIGHT / 45,
+  },
+  finalActionLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: '600',
+    marginBottom: '16%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+  heading: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: 'white',
+    marginTop: SCREEN_HEIGHT / 25,
+    textAlign: 'center',
+  },
+  subHeading: {
+    color: 'white',
+    textAlign: 'center',
+  },
+  subHeadOneMargin: {
+    marginTop: SCREEN_HEIGHT / 30,
+  },
+  subHeadTwoMargin: {
+    marginTop: SCREEN_HEIGHT / 10,
+  },
+});
+
+export default WaitlistSuccessScreen;
-- 
cgit v1.2.3-70-g09d2