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

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}
  />