import React, { useState } from 'react'; import { ImageBackground, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native'; import { default as SnapCarousel, Pagination, } from 'react-native-snap-carousel'; import { COLORS } from '../constants/colors'; import { useDimensions } from '../helpers/dimensions'; import { CarouselItem } from '../types/types'; type Props = { data: Array<CarouselItem>; width?: number; height: number; }; export default function Carousel(props: Props) { let { width: dimensionsWidth } = useDimensions(); let { data, width = dimensionsWidth, height } = props; let [activeIndex, setActiveIndex] = useState(0); return ( <View style={[styles.carouselContainer, { height }]}> <SnapCarousel data={data} renderItem={({ item }) => ( <TouchableWithoutFeedback onPress={item.onItemPress}> <ImageBackground source={{ uri: item.image }} style={[styles.itemContainer, { height }]} > {item.render && item.render()} </ImageBackground> </TouchableWithoutFeedback> )} sliderWidth={width} itemWidth={width} inactiveSlideScale={1} onSnapToItem={(slideIndex: number) => setActiveIndex(slideIndex)} /> <Pagination dotsLength={data.length} activeDotIndex={activeIndex} containerStyle={styles.pagination} dotStyle={styles.activeDotStyle} inactiveDotStyle={styles.inactiveDotStyle} inactiveDotOpacity={0.4} dotContainerStyle={styles.dotContainerStyle} /> </View> ); } const styles = StyleSheet.create({ itemContainer: { justifyContent: 'center', alignItems: 'center', resizeMode: 'contain', }, carouselContainer: { alignItems: 'center', backgroundColor: COLORS.white, }, pagination: { position: 'absolute', bottom: -20, }, dotContainerStyle: { marginHorizontal: 1, }, activeDotStyle: { width: 20, height: 6, borderRadius: 5, opacity: 0.92, backgroundColor: COLORS.white, }, inactiveDotStyle: { width: 11, height: 11, borderRadius: 5, opacity: 0.92, backgroundColor: COLORS.white, }, });