[TMA-180] Image Carousel for Tagg Posts (#77)

* image carousel done

* fixed a minor bug

* TikTok is TikTok NOT Tiktok OKAY?

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

1 files changed, 18 insertions, 6 deletions

diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
index 07efd797..071dbfc4 100644
--- a/src/components/taggs/TaggPost.tsx
+++ b/src/components/taggs/TaggPost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
 import {SimplePostType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
-import {DateLabel} from '../common';
+import {DateLabel, PostCarousel} from '../common';
 import TaggPostFooter from './TaggPostFooter';
 import Hyperlink from 'react-native-hyperlink';
 
@@ -14,11 +14,18 @@ const TaggPost: React.FC<TaggPostProps> = ({post}) => {
     // Post with image and footer that shows caption
     return (
       <View style={styles.photoContainer}>
-        <View style={styles.image}>
-          {post && (
-            <Image style={styles.image} source={{uri: post.media_url}} />
-          )}
-        </View>
+        {post.media_url.length === 1 && post.media_url[0] !== null ? (
+          <Image
+            style={styles.imageWithMargin}
+            source={{uri: post.media_url[0]}}
+          />
+        ) : (
+          <PostCarousel
+            data={post.media_url}
+            imageStyles={styles.image}
+            marginBottom={30}
+          />
+        )}
         <TaggPostFooter
           // we currently don't have a way to retreive num of likes information
           likes={undefined}
@@ -49,6 +56,11 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH,
     height: SCREEN_WIDTH,
     backgroundColor: '#eee',
+  },
+  imageWithMargin: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
     marginBottom: 30,
   },
   textContianer: {marginBottom: 50, paddingHorizontal: 10},