[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, 12 insertions, 3 deletions

diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index c72b4fa8..d0d066c6 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -6,7 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
 import {TwitterPostType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
-import {DateLabel} from '../common';
+import {DateLabel, PostCarousel} from '../common';
 
 interface TwitterTaggPostProps {
   ownerHandle: string;
@@ -56,9 +56,17 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
           <React.Fragment />
         )}
         {/* Second part of content is an image or empty */}
-        {post.media_url ? (
+        {post.media_url.length !== 0 ? (
           <View style={styles.imageContainer}>
-            <Image style={styles.image} source={{uri: post.media_url}} />
+            {post.media_url.length === 1 && post.media_url[0] !== null ? (
+              <Image style={styles.image} source={{uri: post.media_url[0]}} />
+            ) : (
+              <PostCarousel
+                data={post.media_url}
+                imageStyles={styles.image}
+                marginBottom={0}
+              />
+            )}
           </View>
         ) : (
           <React.Fragment />
@@ -89,6 +97,7 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
                   }>
                   @{post.in_reply_to.handle}
                 </Text>
+                {/* We're not displaying any images here in the container */}
                 <DateLabel
                   timestamp={post.in_reply_to.timestamp}
                   type={'short'}