[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, 49 insertions, 0 deletions

diff --git a/src/components/common/PostCarousel.tsx b/src/components/common/PostCarousel.tsx
new file mode 100644
index 00000000..cda9d8db
--- /dev/null
+++ b/src/components/common/PostCarousel.tsx
@@ -0,0 +1,49 @@
+import React, {Fragment, useRef, useState} from 'react';
+import {Image} from 'react-native';
+import Carousel, {Pagination} from 'react-native-snap-carousel';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface PostCarouselProps {
+  data: string[];
+  imageStyles: Object;
+  marginBottom: number;
+}
+
+const PostCarousel: React.FC<PostCarouselProps> = ({
+  data,
+  imageStyles,
+  marginBottom,
+}) => {
+  const carouselRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const renderItem: (item: any) => Object = ({item}) => {
+    if (item === null) {
+      return <Fragment />;
+    } else {
+      return <Image style={imageStyles} source={{uri: item}} />;
+    }
+  };
+
+  return (
+    <>
+      <Carousel
+        ref={carouselRef}
+        data={data}
+        renderItem={renderItem}
+        sliderWidth={SCREEN_WIDTH}
+        itemWidth={SCREEN_WIDTH}
+        onSnapToItem={setCurrentPage}
+      />
+      <Pagination
+        activeDotIndex={currentPage}
+        dotsLength={data.length}
+        containerStyle={{marginBottom: marginBottom}}
+        dotColor={'#6ee7e7'}
+        inactiveDotColor={'#e0e0e0'}
+      />
+    </>
+  );
+};
+
+export default PostCarousel;