title: How can I create multiple image carousels?
body: <p>I am a little new to React Native, and I am trying to create a list of cards with Flatlist, I want to show several images for each card as a carousel, and I am trying to do it with react-native-snap-carousel, the problem is When I scroll a card, the indexes of all the cards move.</p>
  
  <p>How can I get a separate index for each card?</p>
  
  <pre class="lang-js prettyprint-override"><code>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 = () =&gt; {
    const [activeSlide, setActiveSlide] = useState(0);
    const carousel = useRef();
    const entries = [
      {
        title: 'card1',
      },
      {
        title: 'card2',
      },
      {
        title: 'card3',
      },
      {
        title: 'card4',
      },
    ];
  
    var slides = [];
  
    const entriesSplitter = () =&gt; {
      let size = 1; //Based on the size you want
      while (entries.length &gt; 0) {
        slides.push(entries.splice(0, size));
      }
    };
  
    // render every single slide
    const _renderItem = ({ item, index }) =&gt; {
      return (
        &lt;View style={{ flexDirection: 'row', flexWrap: 'wrap' }}&gt;
          {item.map(item =&gt; {
            return &lt;Text key={index}&gt;{item.title}&lt;/Text&gt;;
          })}
        &lt;/View&gt;
      );
    };
  
    return (
      &lt;View&gt;
        {entriesSplitter()}
        &lt;Carousel
          ref={carousel}
          data={slides}
          renderItem={_renderItem}
          onSnapToItem={index =&gt; setActiveSlide(index)}
          sliderWidth={screenWidth}
          sliderHeight={screenHeight}
          itemWidth={screenWidth}
        /&gt;
        &lt;Pagination
          dotsLength={4} // 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}
        /&gt;
        &lt;Carousel
          ref={carousel}
          data={slides}
          renderItem={_renderItem}
          onSnapToItem={index =&gt; setActiveSlide(index)}
          sliderWidth={screenWidth}
          sliderHeight={screenHeight}
          itemWidth={screenWidth}
        /&gt;
        &lt;Pagination
          dotsLength={4} // 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}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  export default myCarousel;
  </code></pre>
  
  <p>The index has a style of circles that when you go to the next, changes colour to indicate how many are left, they all move at the same time</p>