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
You are using two cousel with same refrence and same variable so you need to separate these