How to show 2 items in one pagination of react native snap carousel

Question

How to dispaly 2 items for one pagination(first dot) and if we swipe then next 2 items should display with showing second dot active.

And if it is odd then last item should display my own component in react native snap carousel.

Answer 1

This is how I implemented to show 3 carousels. We can customize it in many ways

import React from "react";
import { View, Dimensions, StyleSheet, Image } from "react-native";
import Carousel from "react-native-snap-carousel";

const windowWidth = Dimensions.get("window").width;

export default function MyCarousel() {
  const images = [
    { id: 1, image: require("../assets/home-slider-1.jpg") },
    { id: 2, image: require("../assets/home-slider-2.jpg") },
    { id: 3, image: require("../assets/home-slider-3.jpg") },
    { id: 4, image: require("../assets/home-slider-4.jpg") }
  ];

  // const imagesUri = [
  //   { id: 1, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } },
  //   { id: 2, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } },
  //   { id: 3, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } },
  //   { id: 4, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } }
  // ];

  const _renderItem = ({ item }) => {
    return (
      <View style={styles.slide}>
        <Image
          source={item.image}
          style={styles.image}
          // resizeMode="center"
        ></Image>
      </View>
    );
  };

  return (
    <View style={styles.wrapper}>
      <Carousel
        data={images}
        renderItem={_renderItem}
        sliderWidth={windowWidth}
        itemWidth={windowWidth - 70}
        enableMomentum={false}
        lockScrollWhileSnapping
        autoplay
        useScrollView
        loop
        autoplayInterval={3000}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    height: 150
  },
  slide: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff"
  },
  image: {
    flex: 1,
    height: "100%",
    width: "100%",
    alignItems: "center",
    justifyContent: "center"
  }
});

Answer 2

Create a function that split "entries" array into smaller arrays based on the size that you want

var slides = [];
const entriesSplitter = () => {
    let size = 2; //Based on the size you want
    while (entries.length > 0) {
        slides.push(entries.splice(0, size));
    }
};

then pass the slides array to <Carousel data={slides}/> then render each slide in _renderItem

consider the following example:-

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

const { width: screenWidth, height: screenHeight } = Dimensions.get("window");

const myCarousel = () => {
const [activeSlide, setActiveSlide] = useState(0);
const carousel = useRef();
const entries = [
    {
        title: "Adidas"
    },
    {
        title: "Nike"
    },
    {
        title: "Puma"
    },
    {
        title: "Reebok"
    }
];

var slides = [];

const entriesSplitter = () => {
    let size = 2; //Based on the size you want
    while (entries.length > 0) {
        slides.push(entries.splice(0, size));
    }
};

// render every single slide
const _renderItem = ({ item,index }) => {
    return (
        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
            {item.map(item => {
                return <Text key={index}>{item.title}</Text>;
            })}
        </View>
    );
};

return (
    <View>
        {entriesSplitter()}
        <Carousel
            ref={carousel}
            data={slides}
            renderItem={_renderItem}
            onSnapToItem={index => setActiveSlide(index)}
            sliderWidth={screenWidth}
            sliderHeight={screenHeight}
            itemWidth={screenWidth}
        />
        <Pagination
            dotsLength={2} // also based on number of sildes you want
            activeDotIndex={activeSlide}
            containerStyle={{ backgroundColor: "red", borderWidth: 2 }}
            dotStyle={{
                width: 10,
                height: 10,
                borderRadius: 5,
                marginHorizontal: 8,
                backgroundColor: "black"
            }}
            inactiveDotStyle={{
                backgroundColor: "pink"
            }}
            inactiveDotOpacity={0.4}
            inactiveDotScale={0.6}
        />
    </View>
);
};

export default myCarousel;

Answer 3

I would suggest that you go ahead and make the item you're rendering in the Carousel one that renders 2 things at once. The Carousel will paginate on whatever you pass to it, so if you're passing something with 2 items in it, it'll paginate on that, so for example:

   <Carousel
    layout="default"
    data={arr}
    renderItem={
      ({ item, index }) => (
        <View style={styles.imageWrapper}>
            <Image
              style={styles.image}
              source={item[0]}
              resizeMode="cover"
              accessibilityLabel="thumbnail"
            />
            <Image
              style={styles.image}
              source={item[1]}
              resizeMode="cover"
              accessibilityLabel="thumbnail"
            />
        </View>
      )
    }
    lockScrollWhileSnapping={true} // Prevent the user from swiping again while the carousel is snapping to a position.
    sliderWidth={screenWidth}
    sliderHeight={screenWidth * 0.5}
    itemWidth={screenWidth - 40}
    activeSlideOffset={50}
    enableSnap
    onSnapToItem={onSnapToItem}
    removeClippedSubviews={false}
    firstItem={0}
    contentContainerCustomStyle={styles.style}
  />