@janiscommerce/ui-native/dist/components/molecules/Carousel/index.js

components library for Janis app

import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import useCarouselControls from './utils';
const Carousel = ({ pages, isLoop = false, autoplay = false, autoPlayReverse = false, intervalTime = 4000, customWidth, buttonsCallback, pagesCallback, ...props }) => {
    if (!pages || !pages?.length) {
        return null;
    }
    const carouselParams = {
        pages,
        isLoop,
        autoplay,
        autoPlayReverse,
        intervalTime,
        customWidth,
        buttonsCallback,
        pagesCallback,
    };
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const { slider, width, onPageChange } = useCarouselControls(carouselParams);
    const styles = StyleSheet.create({
        page: {
            width,
            alignItems: 'center',
        },
    });
    return (<View>
			<ScrollView ref={slider} snapToInterval={width} decelerationRate="fast" pagingEnabled onScroll={onPageChange} scrollEventThrottle={16} horizontal showsHorizontalScrollIndicator={false} {...props}>
				{pages.length &&
            pages.map((page, index) => (<View key={`${index}`} style={styles.page}>
							{page}
						</View>))}
			</ScrollView>
		</View>);
};
export default Carousel;