From 24c269c9d52ec7cf2cd383a8d7c3aee43ed475c1 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@thetaggid.com>
Date: Tue, 27 Oct 2020 20:44:36 -0400
Subject: [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>
---
 src/components/common/PostCarousel.tsx | 49 ++++++++++++++++++++++++++++++++++
 src/components/common/index.ts         |  1 +
 2 files changed, 50 insertions(+)
 create mode 100644 src/components/common/PostCarousel.tsx

(limited to 'src/components/common')

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;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 87ebe810..c7ed13cd 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,5 +11,6 @@ export {default as LoadingIndicator} from './LoadingIndicator';
 export {default as DateLabel} from './DateLabel';
 export {default as SocialLinkModal} from './SocialLinkModal';
 export {default as ComingSoon} from './ComingSoon';
+export {default as PostCarousel} from './PostCarousel';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export * from './post';
-- 
cgit v1.2.3-70-g09d2