[TMA-65] Onboarding Link Social Media UI (#29)

* Basic setup for SocialMediaLinker component

* Added social media icons

* Displayed 3 main social components

* Layout components in a row

* Added base Show More/Less button

* Display all 9 socials with Show More button

* Added different font colors for each linker

* Realized that the check doesn't replace the text

* Added type-checking to some constants

* Updated state name

* Fixed Checkpoint.tsx merge issue

* Removed unnecessary path element

* Fixed type issues on Verification.tsx

37 files changed, 204 insertions, 10 deletions

diff --git a/src/assets/images/facebook-icon.png b/src/assets/images/facebook-icon.png
new file mode 100644
index 00000000..d1f053b6
--- /dev/null
+++ b/src/assets/images/facebook-icon.png
diff --git a/src/assets/images/facebook-icon@2x.png b/src/assets/images/facebook-icon@2x.png
new file mode 100644
index 00000000..0a989e29
--- /dev/null
+++ b/src/assets/images/facebook-icon@2x.png
diff --git a/src/assets/images/facebook-icon@3x.png b/src/assets/images/facebook-icon@3x.png
new file mode 100644
index 00000000..8b5521f1
--- /dev/null
+++ b/src/assets/images/facebook-icon@3x.png
diff --git a/src/assets/images/instagram-icon.png b/src/assets/images/instagram-icon.png
new file mode 100644
index 00000000..f54673a4
--- /dev/null
+++ b/src/assets/images/instagram-icon.png
diff --git a/src/assets/images/instagram-icon@2x.png b/src/assets/images/instagram-icon@2x.png
new file mode 100644
index 00000000..0ed42793
--- /dev/null
+++ b/src/assets/images/instagram-icon@2x.png
diff --git a/src/assets/images/instagram-icon@3x.png b/src/assets/images/instagram-icon@3x.png
new file mode 100644
index 00000000..c498c11e
--- /dev/null
+++ b/src/assets/images/instagram-icon@3x.png
diff --git a/src/assets/images/link-tick.png b/src/assets/images/link-tick.png
new file mode 100644
index 00000000..eb1b813b
--- /dev/null
+++ b/src/assets/images/link-tick.png
diff --git a/src/assets/images/link-tick@2x.png b/src/assets/images/link-tick@2x.png
new file mode 100644
index 00000000..7eca8080
--- /dev/null
+++ b/src/assets/images/link-tick@2x.png
diff --git a/src/assets/images/link-tick@3x.png b/src/assets/images/link-tick@3x.png
new file mode 100644
index 00000000..d3478eaf
--- /dev/null
+++ b/src/assets/images/link-tick@3x.png
diff --git a/src/assets/images/linkedin-icon.png b/src/assets/images/linkedin-icon.png
new file mode 100644
index 00000000..e87ff0fd
--- /dev/null
+++ b/src/assets/images/linkedin-icon.png
diff --git a/src/assets/images/linkedin-icon@2x.png b/src/assets/images/linkedin-icon@2x.png
new file mode 100644
index 00000000..f6cc62d8
--- /dev/null
+++ b/src/assets/images/linkedin-icon@2x.png
diff --git a/src/assets/images/linkedin-icon@3x.png b/src/assets/images/linkedin-icon@3x.png
new file mode 100644
index 00000000..cc8db482
--- /dev/null
+++ b/src/assets/images/linkedin-icon@3x.png
diff --git a/src/assets/images/pinterest-icon.png b/src/assets/images/pinterest-icon.png
new file mode 100644
index 00000000..f0848db1
--- /dev/null
+++ b/src/assets/images/pinterest-icon.png
diff --git a/src/assets/images/pinterest-icon@2x.png b/src/assets/images/pinterest-icon@2x.png
new file mode 100644
index 00000000..03dde113
--- /dev/null
+++ b/src/assets/images/pinterest-icon@2x.png
diff --git a/src/assets/images/pinterest-icon@3x.png b/src/assets/images/pinterest-icon@3x.png
new file mode 100644
index 00000000..3867eed8
--- /dev/null
+++ b/src/assets/images/pinterest-icon@3x.png
diff --git a/src/assets/images/snapchat-icon.png b/src/assets/images/snapchat-icon.png
new file mode 100644
index 00000000..3fef7d5f
--- /dev/null
+++ b/src/assets/images/snapchat-icon.png
diff --git a/src/assets/images/snapchat-icon@2x.png b/src/assets/images/snapchat-icon@2x.png
new file mode 100644
index 00000000..ff202457
--- /dev/null
+++ b/src/assets/images/snapchat-icon@2x.png
diff --git a/src/assets/images/snapchat-icon@3x.png b/src/assets/images/snapchat-icon@3x.png
new file mode 100644
index 00000000..6872961a
--- /dev/null
+++ b/src/assets/images/snapchat-icon@3x.png
diff --git a/src/assets/images/twitch-icon.png b/src/assets/images/twitch-icon.png
new file mode 100644
index 00000000..f29c1996
--- /dev/null
+++ b/src/assets/images/twitch-icon.png
diff --git a/src/assets/images/twitch-icon@2x.png b/src/assets/images/twitch-icon@2x.png
new file mode 100644
index 00000000..1836b0ca
--- /dev/null
+++ b/src/assets/images/twitch-icon@2x.png
diff --git a/src/assets/images/twitch-icon@3x.png b/src/assets/images/twitch-icon@3x.png
new file mode 100644
index 00000000..9ab3041f
--- /dev/null
+++ b/src/assets/images/twitch-icon@3x.png
diff --git a/src/assets/images/twitter-icon.png b/src/assets/images/twitter-icon.png
new file mode 100644
index 00000000..96d90d28
--- /dev/null
+++ b/src/assets/images/twitter-icon.png
diff --git a/src/assets/images/twitter-icon@2x.png b/src/assets/images/twitter-icon@2x.png
new file mode 100644
index 00000000..5d2ff293
--- /dev/null
+++ b/src/assets/images/twitter-icon@2x.png
diff --git a/src/assets/images/twitter-icon@3x.png b/src/assets/images/twitter-icon@3x.png
new file mode 100644
index 00000000..6ab31839
--- /dev/null
+++ b/src/assets/images/twitter-icon@3x.png
diff --git a/src/assets/images/whatsapp-icon.png b/src/assets/images/whatsapp-icon.png
new file mode 100644
index 00000000..c42a20b6
--- /dev/null
+++ b/src/assets/images/whatsapp-icon.png
diff --git a/src/assets/images/whatsapp-icon@2x.png b/src/assets/images/whatsapp-icon@2x.png
new file mode 100644
index 00000000..b89d1e09
--- /dev/null
+++ b/src/assets/images/whatsapp-icon@2x.png
diff --git a/src/assets/images/whatsapp-icon@3x.png b/src/assets/images/whatsapp-icon@3x.png
new file mode 100644
index 00000000..0ee2873b
--- /dev/null
+++ b/src/assets/images/whatsapp-icon@3x.png
diff --git a/src/assets/images/youtube-icon.png b/src/assets/images/youtube-icon.png
new file mode 100644
index 00000000..2d78a143
--- /dev/null
+++ b/src/assets/images/youtube-icon.png
diff --git a/src/assets/images/youtube-icon@2x.png b/src/assets/images/youtube-icon@2x.png
new file mode 100644
index 00000000..33b3ebec
--- /dev/null
+++ b/src/assets/images/youtube-icon@2x.png
diff --git a/src/assets/images/youtube-icon@3x.png b/src/assets/images/youtube-icon@3x.png
new file mode 100644
index 00000000..612d4472
--- /dev/null
+++ b/src/assets/images/youtube-icon@3x.png
diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
new file mode 100644
index 00000000..f1da8186
--- /dev/null
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableOpacityProps,
+  Text,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import {LinkerType} from 'src/types';
+import {SOCIAL_FONT_COLORS} from '../../constants/constants';
+
+interface SocialMediaLinkerProps extends TouchableOpacityProps {
+  social: LinkerType;
+}
+
+const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
+  social: {label},
+}) => {
+  const [state, setState] = React.useState({
+    authenticated: false,
+  });
+
+  const handlePress = () => {
+    setState({
+      ...state,
+      authenticated: !state.authenticated,
+    });
+  };
+
+  switch (label) {
+    case 'Instagram':
+      var icon = require('../../assets/images/instagram-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.INSTAGRAM;
+      break;
+    case 'Facebook':
+      var icon = require('../../assets/images/facebook-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.FACEBOOK;
+      break;
+    case 'Twitter':
+      var icon = require('../../assets/images/twitter-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.TWITTER;
+      break;
+    case 'Twitch':
+      var icon = require('../../assets/images/twitch-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.TWITCH;
+      break;
+    case 'Pinterest':
+      var icon = require('../../assets/images/pinterest-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.PINTEREST;
+      break;
+    case 'Whatsapp':
+      var icon = require('../../assets/images/whatsapp-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.WHATSAPP;
+      break;
+    case 'Linkedin':
+      var icon = require('../../assets/images/linkedin-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.LINKEDIN;
+      break;
+    case 'Snapchat':
+      var icon = require('../../assets/images/snapchat-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.SNAPCHAT;
+      break;
+    case 'Youtube':
+      var icon = require('../../assets/images/youtube-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.YOUTUBE;
+      break;
+    default:
+      var icon = require('../../assets/images/logo.png');
+      var font_color = '#fff';
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      onPress={handlePress}
+      style={styles.container}>
+      <Image source={icon} style={styles.icon} />
+      <Text style={[styles.label, {color: font_color}]}>{label}</Text>
+      {state.authenticated && (
+        <Image
+          source={require('../../assets/images/link-tick.png')}
+          style={styles.tick}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '28%',
+    height: '100%',
+    backgroundColor: '#4c409a',
+    borderRadius: 8,
+    marginHorizontal: '2%',
+    marginVertical: '2%',
+    alignItems: 'center',
+  },
+  icon: {
+    top: '15%',
+  },
+  label: {
+    fontWeight: '500',
+    top: '25%',
+  },
+  tick: {
+    top: '30%',
+  },
+});
+export default SocialMediaLinker;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index 31f356d3..627412df 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -7,3 +7,4 @@ export {default as TaggInput} from './TaggInput';
 export {default as TaggBigInput} from './TaggBigInput';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export {default as TaggDropDown} from './TaggDropDown';
+export {default as SocialMediaLinker} from './SocialMediaLinker';
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index f79c2c5b..ee178b68 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -8,3 +8,37 @@ export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT / 1.95;
 export const IMAGE_WIDTH = SCREEN_WIDTH;
 export const IMAGE_HEIGHT = SCREEN_WIDTH;
 export const COVER_HEIGHT = SCREEN_WIDTH * (7 / 5);
+
+export const SOCIAL_LIST: Array<string> = [
+  'Instagram',
+  'Facebook',
+  'Twitter',
+  'Twitch',
+  'Pinterest',
+  'Whatsapp',
+  'Linkedin',
+  'Snapchat',
+  'Youtube',
+];
+
+export const INSTAGRAM_FONT_COLOR: string = '#FF97DE';
+export const FACEBOOK_FONT_COLOR: string = '#6697FD';
+export const TWITTER_FONT_COLOR: string = '#74C9FD';
+export const TWITCH_FONT_COLOR: string = '#CB93FF';
+export const PINTEREST_FONT_COLOR: string = '#FF7584';
+export const WHATSAPP_FONT_COLOR: string = '#4AC959';
+export const LINKEDIN_FONT_COLOR: string = '#78B5FD';
+export const SNAPCHAT_FONT_COLOR: string = '#FFFC00';
+export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
+
+export const SOCIAL_FONT_COLORS = {
+  INSTAGRAM: INSTAGRAM_FONT_COLOR,
+  FACEBOOK: FACEBOOK_FONT_COLOR,
+  TWITTER: TWITTER_FONT_COLOR,
+  TWITCH: TWITCH_FONT_COLOR,
+  PINTEREST: PINTEREST_FONT_COLOR,
+  WHATSAPP: WHATSAPP_FONT_COLOR,
+  LINKEDIN: LINKEDIN_FONT_COLOR,
+  SNAPCHAT: SNAPCHAT_FONT_COLOR,
+  YOUTUBE: YOUTUBE_FONT_COLOR,
+};
diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx
index 0f0b5c83..f5521ab2 100644
--- a/src/routes/onboarding/OnboardingStack.tsx
+++ b/src/routes/onboarding/OnboardingStack.tsx
@@ -6,7 +6,7 @@ export type OnboardingStackParams = {
   RegistrationTwo:
     | {firstName: string; lastName: string; email: string}
     | undefined;
-  Checkpoint: {username: string; email: string; userId: string};
+  Checkpoint: {username: string; userId: string};
   Verification: {username: string; email: string; userId: string};
   ProfileOnboarding: {username: string; userId: string};
 };
diff --git a/src/screens/main/Home.tsx b/src/screens/main/Home.tsx
index 86f9b2ba..7b6f1aaf 100644
--- a/src/screens/main/Home.tsx
+++ b/src/screens/main/Home.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import {Text} from 'react-native-animatable';
-import {StyleSheet} from 'react-native';
-import {GradientBackground} from '../../components';
+import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
+import {GradientBackground, SocialMediaLinker} from '../../components';
+import {LinkerType} from 'src/types';
+import {SOCIAL_LIST} from '../../constants/';
 
 /**
  * Home Screen for displaying Tagg post suggestions
@@ -9,16 +10,59 @@ import {GradientBackground} from '../../components';
  */
 
 const Home: React.FC = () => {
+  const linkers: Array<LinkerType> = [];
+  const [state, setState] = React.useState({
+    showMore: false,
+  });
+
+  let numSocials: Number = state.showMore ? 9 : 3;
+
+  for (let i = 0; i < numSocials; i++) {
+    let linker: LinkerType = {
+      label: SOCIAL_LIST[i],
+    };
+    linkers.push(linker);
+  }
+
+  const handleShowPress = () => {
+    setState({
+      ...state,
+      showMore: !state.showMore,
+    });
+  };
+
   return (
     <GradientBackground>
-      <Text style={styles.text}> Tagg Home Screen 🏠 </Text>
+      <View style={styles.container}>
+        {linkers.map((linker, index) => (
+          <SocialMediaLinker key={index} social={linker} />
+        ))}
+        <TouchableOpacity onPress={handleShowPress} style={styles.show}>
+          {state.showMore && <Text>Show Less 🔼</Text>}
+          {!state.showMore && <Text>Show More 🔽</Text>}
+        </TouchableOpacity>
+      </View>
     </GradientBackground>
   );
 };
+
 const styles = StyleSheet.create({
-  text: {
+  container: {
+    flexDirection: 'row',
+    height: '19%',
+    flexWrap: 'wrap',
     justifyContent: 'center',
-    backgroundColor: 'transparent',
+    alignContent: 'center',
+  },
+  show: {
+    borderColor: '#fff',
+    borderWidth: 1,
+    borderRadius: 3,
+    paddingHorizontal: '2%',
+    paddingVertical: '1%',
+    marginVertical: '3%',
+    marginLeft: '65%',
   },
 });
+
 export default Home;
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 013a80d2..4a58548e 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -10,12 +10,13 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import {RootStackParamList, AuthContext} from '../../routes';
+import {OnboardingStackParams} from '../../routes';
+import {AuthContext} from '../../routes/authentication';
 import {RegistrationWizard, Background} from '../../components';
 
-type CheckpointRouteProp = RouteProp<RootStackParamList, 'Checkpoint'>;
+type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>;
 type CheckpointNavigationProp = StackNavigationProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'Checkpoint'
 >;
 interface CheckpointProps {
diff --git a/src/types/types.ts b/src/types/types.ts
index 1a023932..d6f69b85 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -12,3 +12,7 @@ export interface ProfileType {
 export interface PostType {
   owner: UserType;
 }
+
+export interface LinkerType {
+  label: string;
+}