There is an image slider that contains more than 200 images there is a circular slider from which we slide that image slider. so we need to call the snapToItem method to move the carousel in a specific position. but snapToItem does not move the carousel to a specific position.
If the slider has only 10 or 15 images then it works perfectly but if we have more than 15 images snapToItem method doesn't work properly.
<Carousel
ref={carouselRef}
data={data}
renderItem={renderCarouselItem}
sliderWidth={width}
itemWidth={ITEM_WIDTH}
contentContainerCustomStyle={STYLES.paddingBottom10}
lockScrollWhileSnapping
onSnapToItem={index => setFocusedSliderIndex(index)}
containerCustomStyle={{
marginTop: heightToDp(10),
}}
enableMomentum
// scrollInterpolator={scrollInterpolator}
// slideInterpolatedStyle={animatedStyles}
/>
// we call the onUpdate function to move the slider using ciruclar-slider.
const onUpdate = () => {
// where we pass newIndex is dyanamic
if (carouselRef && carouselRef.current) {
carouselRef.current.snapToItem(newIndex);
}
};
Platform:- iOS/android (both)
react-native: 0.66.4,
react-native-snap-carousel: 3.9.1