[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

2 files changed, 54 insertions, 9 deletions

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 {