I am using react-native-snap-carousel for showing the banners. It is working fine in iOS for both manual scroll as well as autoscroll after interval, but in android while scrolling it manually, facing two issues.
- For some devices, specifically Samsung that it gets stuck at third index (When done manually, but automatic one is working).
- For all devices, there seems to be a lag on showing the banner while scrolling manually. Tested for various devices.
I have used following code.
<Carousel
onSnapToItem={(slideIndex: number) => {
setSlideIndex(slideIndex);
}}
data={data}
renderItem={renderSliderItem}
sliderWidth={carouselWidth}
itemWidth={carouselWidth}
loop={true}
slideStyle={{ width: carouselWidth }}
autoplay={autoPlay}
autoplayDelay={scrollInterval}
autoplayInterval={scrollInterval}
useScrollView
enableSnap={true}
shouldOptimizeUpdates={true}
loopClonesPerSide={5}
enableMomentum={true}
activeSlideAlignment="center"
removeClippedSubviews={true}
decelerationRate={0.9}
inactiveSlideScale={1}
inactiveSlideOpacity={1}
lockScrollWhileSnapping={true}
/>
For most of the cases, decelerationRate={0.9},inactiveSlideOpacity={1} and enableMomentum={true} seems to fix the issue, but it is not working for my case. But when i set pagingEnabled={true}, it seems to be working but then the automatic scroll index and manual scroll index are not in sync.
Stuck since long.