react-native-snap-carousel

What is react-native-snap-carousel?

react-native-snap-carousel is a versatile and highly customizable carousel component for React Native. It allows developers to create beautiful and performant carousels with snapping effect, which can be used for image sliders, product showcases, and more.

Basic Carousel

This code demonstrates a basic carousel with three items. Each item is rendered using the `renderItem` function, and the carousel is configured to snap to each item.

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width: viewportWidth } = Dimensions.get('window');

const data = [{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }];

const renderItem = ({ item }) => (
  <View style={{ backgroundColor: 'lightblue', borderRadius: 5, height: 150, padding: 50 }}>
    <Text>{item.title}</Text>
  </View>
);

const MyCarousel = () => (
  <Carousel
    data={data}
    renderItem={renderItem}
    sliderWidth={viewportWidth}
    itemWidth={viewportWidth - 60}
  />
);

export default MyCarousel;

Custom Pagination

This code demonstrates how to add custom pagination to the carousel. The `Pagination` component is used to display dots indicating the current active slide.

import React, { useState } from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';

const { width: viewportWidth } = Dimensions.get('window');

const data = [{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }];

const renderItem = ({ item }) => (
  <View style={{ backgroundColor: 'lightblue', borderRadius: 5, height: 150, padding: 50 }}>
    <Text>{item.title}</Text>
  </View>
);

const MyCarousel = () => {
  const [activeSlide, setActiveSlide] = useState(0);

  return (
    <View>
      <Carousel
        data={data}
        renderItem={renderItem}
        sliderWidth={viewportWidth}
        itemWidth={viewportWidth - 60}
        onSnapToItem={(index) => setActiveSlide(index)}
      />
      <Pagination
        dotsLength={data.length}
        activeDotIndex={activeSlide}
        containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.75)' }}
        dotStyle={{ width: 10, height: 10, borderRadius: 5, marginHorizontal: 8, backgroundColor: 'white' }}
        inactiveDotStyle={{ backgroundColor: 'gray' }}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
      />
    </View>
  );
};

export default MyCarousel;

Looping Carousel

This code demonstrates a looping carousel with autoplay functionality. The carousel will automatically cycle through the items with a specified delay and interval.

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width: viewportWidth } = Dimensions.get('window');

const data = [{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }];

const renderItem = ({ item }) => (
  <View style={{ backgroundColor: 'lightblue', borderRadius: 5, height: 150, padding: 50 }}>
    <Text>{item.title}</Text>
  </View>
);

const MyCarousel = () => (
  <Carousel
    data={data}
    renderItem={renderItem}
    sliderWidth={viewportWidth}
    itemWidth={viewportWidth - 60}
    loop={true}
    autoplay={true}
    autoplayDelay={1000}
    autoplayInterval={3000}
  />
);

export default MyCarousel;