blob: cda9d8db665e26f412b6a353ff9187a2582aa4ce (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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;
|
