3 files changed, 107 insertions, 10 deletions
diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx
new file mode 100644
index 00000000..37a95790
--- /dev/null
+++ b/src/components/onboarding/UniversitySelection.tsx
@@ -0,0 +1,93 @@
+import React, {useState} from 'react';
+import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+interface UniversitySelectionProps {
+  selected: string;
+  setSelected: (selected: string) => void;
+}
+
+const UniversitySelection: React.FC<UniversitySelectionProps> = ({selected, setSelected}) => {
+  const crestData = [
+    {
+      imagePath: require('../../assets/images/badges/brown_badge.png'),
+      title: 'Brown',
+      key: 'Brown University',
+    },
+    {
+      imagePath: require('../../assets/images/badges/brown_badge.png'),
+      title: 'Cornell',
+      key: 'Cornell University',
+    },
+    {
+      imagePath: require('../../assets/images/badges/brown_badge.png'),
+      title: 'Harvard',
+      key: 'Harvard University',
+    },
+  ];
+  const renderButton = (
+    imagePath: ImageSourcePropType,
+    title: string,
+    key: string,
+  ) => (
+    <TouchableOpacity
+      style={
+        selected === key ? styles.crestContainerSelected : styles.crestContainer
+      }
+      onPress={() => setSelected(key)}>
+      <Image source={imagePath} style={styles.crest} />
+      <Text style={styles.crestLabel}>{title}</Text>
+    </TouchableOpacity>
+  );
+  return (
+    <>
+      <Text style={styles.title}>University Badge</Text>
+      <View style={styles.container}>
+        {crestData.map((data) =>
+          renderButton(data.imagePath, data.title, data.key),
+        )}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 10,
+  },
+  crest: {
+    height: normalize(25),
+    aspectRatio: 31 / 38,
+    marginBottom: 5,
+  },
+  crestContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+  crestContainerSelected: {
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: 'white',
+    borderRadius: 5,
+    padding: 8,
+    backgroundColor: '#fff2',
+  },
+  crestLabel: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: '500',
+  },
+});
+
+export default UniversitySelection;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index b790933f..fdb85090 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -10,3 +10,4 @@ export {default as TaggDropDown} from './TaggDropDown';
 export {default as SocialMediaLinker} from './SocialMediaLinker';
 export {default as LinkSocialMedia} from './LinkSocialMedia';
 export {default as MomentCategory} from './MomentCategory';
+export {default as UniversitySelection} from './UniversitySelection';
diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx
index 6d379b5e..dffdf2fe 100644
--- a/src/screens/onboarding/OnboardingStepThree.tsx
+++ b/src/screens/onboarding/OnboardingStepThree.tsx
@@ -1,4 +1,3 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import moment from 'moment';
@@ -20,20 +19,13 @@ import {
   RegistrationWizard,
   TaggDropDown,
   TaggInput,
+  UniversitySelection,
 } from '../../components';
+import {CLASS_YEAR_LIST, genderRegex, TAGG_PURPLE} from '../../constants';
 import {
-  CLASS_YEAR_LIST,
-  EDIT_PROFILE_ENDPOINT,
-  genderRegex,
-  TAGG_PURPLE,
-} from '../../constants';
-import {
-  ERROR_DOUBLE_CHECK_CONNECTION,
-  ERROR_PROFILE_CREATION_SHORT,
   ERROR_SELECT_BIRTHDAY,
   ERROR_SELECT_CLASS_YEAR,
   ERROR_SELECT_GENDER,
-  ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD_SMALL_PROFILE_PIC,
 } from '../../constants/strings';
 import {OnboardingStackParams} from '../../routes/onboarding';
@@ -62,6 +54,7 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
   let emptyDate: string | undefined;
   const [form, setForm] = React.useState({
     smallPic: '',
+    university: '',
     birthdate: emptyDate,
     gender: '',
     isValidGender: true,
@@ -210,6 +203,10 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
       request.append('university_class', form.classYear);
     }
 
+    if (form.university !== '') {
+      request.append('university', form.university);
+    }
+
     if (invalidFields) {
       return;
     }
@@ -242,6 +239,12 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
           />
         </View>
         <View style={styles.contentContainer}>
+          <UniversitySelection selected={form.university} setSelected={(selected) => {
+            setForm({
+              ...form,
+              university: selected
+            })
+          }}/>
           <TaggDropDown
             onValueChange={(value: string) => handleClassYearUpdate(value)}
             items={classYearList}