React native Question posted in
The official React Native documentation can be found here.

React native – 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>```
Tags:

2

Answers


  1. 0

    Could you provide a gif video of what is happening?
    react-native-animated-dots-carousel doesn’t have a way of know exactly when should execute the transition, detect that moment on 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 by reducing the scrollAnimationDuration or play around with onProgressChange maybe that prop can do what you need.

    I also think that it will look smother 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 suggestion! Have a good day

    Login or Signup to reply.
  2. 0

    Using Math.round and onProgressChange prop instead of onSnapToItem did the trick for me. In your case it should look like this

    <Carousel
  ...
  onProgressChange={(_, absoluteProgress) => {
    handleIndex(Math.round(absoluteProgress));
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search