RESOLVE - Pagination react-native-reanimated-carousel and react-native-animated-dots-carousel

I have a little problem with react-native-reanimated-carousel
I try to install a pagination with react-native-animated-dots-carousel but when I swipe my carousel, my pagination takes on my new value only when the carousel stops moving. The problem is that if I pass three images at once, the pagination goes from 1 to 4 without any transition and it seems that it has a time delay.

How can I solve this problem? Here is my carousel code:

const handleIndex = (index: number) => {
setIndex(index)
}
<Carousel
style={{borderRadius: 5}}
pagingEnabled={true}
loop={false}
width={width}
height={180}
autoPlay={false}
data={props.arrayImage}
panGestureHandlerProps={{
activeOffsetX: [-10, 10],
}}
onSnapToItem={(index) => handleIndex(index)}
renderItem={({ item, ind }: any) => (
<View>
<View>
<Image
style={styles.imageFullSize}
source={{
uri: item
}}
/>
</View>
</View>
)}
/>
<View style={{position: 'absolute', bottom: 50, left: 20, width: '100%', height: 25, justifyContent: 'center', alignContent: 'center'}}>
<AnimatedDotsCarousel
length={props.arrayImage.length}
currentIndex={index}
maxIndicators={props.arrayImage.length}
interpolateOpacityAndColor={false}
activeIndicatorConfig={{
color: '#EC3C4C',
margin: 3,
opacity: 1,
size: 8,
}}
inactiveIndicatorConfig={{
color: '#F96B2B',
margin: 3,
opacity: 0.5,
size: 8,
}}
decreasingDots={[
{
config: { color: '#F96B2B', margin: 3, opacity: 0.5, size: 6 },
quantity: 1,
},
{
config: { color: '#F96B2B', margin: 3, opacity: 0.5, size: 4 },
quantity: 1,
},
]}
/>
</View>```
</details>
# 答案1
**得分**: 2
使用 Math.round 和 onProgressChange 属性代替 onSnapToItem 对我有帮助。在您的情况下，应该如下所示：
```jsx
<Carousel
...
onProgressChange={(_, absoluteProgress) => {
handleIndex(Math.round(absoluteProgress));
}}
/>

<Carousel
...
onProgressChange={(_, absoluteProgress) => {
handleIndex(Math.round(absoluteProgress));
}}
/>

答案2

得分: -1

Could you provide a gif video of what is happening?

react-native-animated-dots-carousel doesn't have a way of knowing exactly when should execute the transition, detecting that moment in the proper way is up to you. You need to detect the event of the index changing faster, for example, if you implement a Carousel using a FlatList, you can use:

scrollEventThrottle

but since you are using react-native-reanimated-carousel, maybe you can try reducing the scrollAnimationDuration or play around with onProgressChange. Maybe that prop can do what you need.

I also think that it will look smoother if you use

interpolateOpacityAndColor={false}

on react-native-animated-dots-carousel.

I am the owner of react-native-animated-dots-carousel, so I would appreciate any suggestions! Have a good day.

interpolateOpacityAndColor={false}