[TMA-186] Instagram Taggs - Frontend (#45)

* Renamed Moments(Bar) to Taggs(Bar)

* created initial navigation and empty social media taggs screen

* made more progress for the header styling

* Finished social media taggs screen, organized code structure

* linted stuff D:

* moved bar height utility function to utils

* moved color constants to constants

* moved avatar title

* updated comments for social media taggs

* NOW the file is there

2 files changed, 88 insertions, 0 deletions

diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
new file mode 100644
index 00000000..8bc5e4d8
--- /dev/null
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -0,0 +1,87 @@
+import {RouteProp} from '@react-navigation/native';
+import React from 'react';
+import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { AVATAR_GRADIENT } from '../../constants';
+import {SocialMediaInfo, TabsGradient, TaggsFeed} from '../../components';
+import {AuthContext, ProfileStackParams} from '../../routes';
+import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
+
+type SocialMediaTaggsRouteProp = RouteProp<
+  ProfileStackParams,
+  'SocialMediaTaggs'
+>;
+
+interface SocialMediaTaggsProps {
+  route: SocialMediaTaggsRouteProp;
+}
+
+/**
+ * Social media taggs screen for a user's social media
+ * includes:
+ *  + tagg profile pic
+ *  + username from social media
+ *  + post
+ *  + caption
+ *  + sharebutton + number of shares
+ *  + date posted
+ *  + dark background
+ */
+const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = () => {
+  const {
+    user,
+    profile: {name},
+  } = React.useContext(AuthContext);
+
+  // TODO: We should use the passed-in socialmedia type/handle instead.
+  //        Currently don't have an intuitive way of doing so, for now,
+  //        just grabbing from user's AuthContext.
+  // const {socialMediaType, socialMediaHandle} = route.params;
+  const {instaPosts} = React.useContext(AuthContext);
+  const socialMediaType = 'Instagram';
+  const socialMediaHandle = instaPosts[0].username;
+
+  const headerHeight = headerBarHeightWithImage();
+  console.log(headerHeight);
+
+  return (
+    <LinearGradient
+      useAngle={true}
+      angle={148}
+      style={styles.flex}
+      colors={[AVATAR_GRADIENT.start, AVATAR_GRADIENT.end]}>
+      <StatusBar barStyle={'light-content'} />
+      {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
+      <View
+        // we want a slightly bigger header here for the avatar image
+        style={[styles.flex, {paddingTop: headerHeight}]}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainer}>
+          <SocialMediaInfo
+            fullname={name}
+            type={socialMediaType}
+            handle={socialMediaHandle}
+          />
+          <TaggsFeed
+            user={user}
+            socialHandle={socialMediaHandle}
+            posts={instaPosts}
+          />
+        </ScrollView>
+        <TabsGradient />
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingBottom: SCREEN_HEIGHT / 15,
+  },
+  flex: {
+    flex: 1,
+  },
+});
+
+export default SocialMediaTaggs;
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index 0ade259d..bc86031f 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -1 +1,2 @@
 export {default as ProfileScreen} from './ProfileScreen';
+export {default as SocialMediaTaggs} from './SocialMediaTaggs';