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.
How can I get a separate index for each card?
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: 'card1',
},
{
title: 'card2',
},
{
title: 'card3',
},
{
title: 'card4',
},
];
var slides = [];
const entriesSplitter = () => {
let size = 1; //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={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}
/>
<Carousel
ref={carousel}
data={slides}
renderItem={_renderItem}
onSnapToItem={index => setActiveSlide(index)}
sliderWidth={screenWidth}
sliderHeight={screenHeight}
itemWidth={screenWidth}
/>
<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}
/>
</View>
);
};
export default myCarousel;
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