onProgressChanged and onSnapToItem takes too long to give back an index

[RGDEV2022]

Describe the bug onProgressChanged and onSnapToItem takes too long to give back an index If I want to set a scrollAnimationDuration of 1000 for example, and use onSnapToItem to set the index of the dot in a pagination component, it takes 1sec to update.

Expected behavior Gives the next index immediately on swipe. Not wait until it has snapped and settled.

Versions (please complete the following information):

• react: v17.0.2
• react-native: v0.68.2
• react-native-reanimated-carousel: v3.0.6

[dohooo]

This question is about timing, and I'll update the new index after the animation is done rather than begin, but onProgressChange always be synced. Why It took a long time? Maybe I can add new Props to get the next index information before the animation. Be like onBeforeSnapToItem. But there's no way to calculate exactly for onBeforeSnapToItem callback until the animation stops completely. How do you calculate the final index? e.g. If you scroll for half of the screen width, the index will doesn't change. It will scroll back.

[RGDEV2022]

@dohooo ahh I see the thinking behind the decision. I'm still confused how the old carousel library did this - the snap-carousel. The index seems to change a lot smoother in that one. Here it almost feels like it takes about 200-300ms before actually changing the index even after snapping.

[dohooo]

@dohooo ahh I see the thinking behind the decision. I'm still confused how the old carousel library did this - the snap-carousel. The index seems to change a lot smoother in that one. Here it almost feels like it takes about 200-300ms before actually changing the index even after snapping.

oh, I know what you mean. The timing function causes this.

withTiming withSpring

When you think the animation is done and the index should be changing, but actually, the animation isn’t done because the timing function is causing that. You should read the documentation of reanimated. 🥸

[dohooo]

Maybe this new prop isn’t necessary, and you’ll solve the problem when you figure out the correct usage of reanimated. 🚀

[dohooo]

Re. #267. I'll make a simple pagination component for basic usage. OHHHHH, Sry! I just understood what you meant. You want a simple way to control the pagination state rather than delicate animation. Let me think it over.

[dohooo]

It will be delayed If you want to use the react state to control the pagination status. There haven’t any way to do that currently. I’ll solve it.

[mehthabux]

any luck ?

[DomVinyard]

But there's no way to calculate exactly for onBeforeSnapToItem callback until the animation stops completely. How do you calculate the final index? e.g. If you scroll for half of the screen width, the index will doesn't change. It will scroll back.

In this case you would call onBeforeSnapToItem again with the previous index

[ajp8164]

onProgressChange shows that the index does change when progress reaches 50% (call getCurrentIndex inside onProgressChange). Setting state in onProgressChange seems to work well on device - not so good on sim.

Edit: I originally thought this wasn't working well until I tried on device rather than sim.

              onProgressChange={(
                _offsetProgress: number,
                absoluteProgress: number,
              ) => {
                if (
                  carouselRef.current &&
                  (absoluteProgress > 0.5 ||
                    carouselRef.current?.getCurrentIndex() === 0)
                ) {
                  setActiveSlide(carouselRef.current.getCurrentIndex());
                }
              }}

[MatthewPattell]

Faced the same problem. If you scroll very quickly, onSnapToItem is not called at all. Temporary solution (updated):

const carouselRef = useRef<ICarouselInstance>();
const isNewSwap = useRef(false);

onScrollBegin={() => {
  isNewSwap.current = true;
}}
onProgressChange={(_, absoluteProgress) => {
  const progress = absoluteProgress - carouselRef.current.getCurrentIndex();

  if (carouselRef.current && Math.abs(progress) >= 0.45 && isNewSwap.current) {
    isNewSwap.current = false;

    setTimeout(() => {
      setWallpaperIndex(carouselRef.current.getCurrentIndex());
    }, 50);
  }
}}

setWallpaperIndex - custom function which change state

[mehthabux]

I tried the above solutions , its works fine , but have issue when we are using carouselRef.current?.next(). sometime it skips slides and show white screen. I made few changes in the above and what worked for me is: const onProgressChange = useCallback( (_, progress) => { progressValue.value = progress; const currentIndex = carouselRef.current?.getCurrentIndex(); if (currentIndex > 0 && currentIndex <= 0.05 && activeIndex !== 0) { setActiveIndex(0); } else if ( currentIndex > 0.05 && currentIndex <= 1.05 && activeIndex !== 1 ) { setActiveIndex(1); } else if ( currentIndex > 1.05 && currentIndex <= 2 && activeIndex !== 2 ) { setActiveIndex(2); } }, [activeIndex], );

the above one only works for 3 slide data

[douglas-esportudo]

onProgressChange shows that the index does change when progress reaches 50% (call getCurrentIndex inside onProgressChange). Setting state in onProgressChange seems to work well on device - not so good on sim.

Edit: I originally thought this wasn't working well until I tried on device rather than sim.

              onProgressChange={(
                _offsetProgress: number,
                absoluteProgress: number,
              ) => {
                if (
                  carouselRef.current &&
                  (absoluteProgress > 0.5 ||
                    carouselRef.current?.getCurrentIndex() === 0)
                ) {
                  setActiveSlide(carouselRef.current.getCurrentIndex());
                }
              }}

works fine for me, thank you!

[JoeDareZone]

Slightly cleaner version of the above fix

onProgressChange={(_offsetProgress: number, absoluteProgress: number) => {
  const currentIndex = carouselRef.current?.getCurrentIndex() || 0;

  if (absoluteProgress > 0.5 || currentIndex === 0) {
    setTutorialImageIndex(currentIndex);
  }
}}

[seungyoubkim]

Slightly cleaner version of the above fix

onProgressChange={(_offsetProgress: number, absoluteProgress: number) => {
  const currentIndex = carouselRef.current?.getCurrentIndex() || 0;

  if (absoluteProgress > 0.5 || currentIndex === 0) {
    setTutorialImageIndex(currentIndex);
  }
}}

The getCurrentIndex function strangely returns 0, 1, 2, and 3 when the length of the data is 2. I expect it to return either 0 or 1. This issue does not occur when the length of the data is more than 3. Is this an issue that only I am encountering?

It seems to work well when I use the following code:

onProgressChange={(_, absoluteProgress) => {
  const currentIndex = Math.round(absoluteProgress) % data.length;
  setTutorialImageIndex(currentIndex);
}}

[bozha-step]

Slightly cleaner version of the above fix

onProgressChange={(_offsetProgress: number, absoluteProgress: number) => {
  const currentIndex = carouselRef.current?.getCurrentIndex() || 0;

  if (absoluteProgress > 0.5 || currentIndex === 0) {
    setTutorialImageIndex(currentIndex);
  }
}}

The getCurrentIndex function strangely returns 0, 1, 2, and 3 when the length of the data is 2. I expect it to return either 0 or 1. This issue does not occur when the length of the data is more than 3. Is this an issue that only I am encountering?

It seems to work well when I use the following code:

onProgressChange={(_, absoluteProgress) => {
  const currentIndex = Math.round(absoluteProgress) % data.length;
  setTutorialImageIndex(currentIndex);
}}

I have met the same issue, the posted solution works!

[bozha-step]

I found setState will fire multiple times as it's not sync. Solution is to add a local ref to check when index is updated, this is useful if we have some complex onIndexUpdate handler in onProgressChange:

    const localIndexRef = useRef(0)

    <Carousel
         ...
          onProgressChange={(_, absoluteProgress: number) => {
              if (data.length === 0) {
                  return
              }

              // Calculate the current index. Using Math.round to get the nearest index.
              // Using mod to prevent index overflow when the length of data changes.
              const newIndex = Math.round(absoluteProgress) % data.length

              // Check if the new index is different from the current ref index.
              // If so, update the ref and invoke the onIndexChange callback.
              // This prevents multiple calls to onIndexChange when the index hasn't actually changed.
              if (localIndexRef.current !== newIndex) {
                  localIndexRef.current = newIndex
                  if (onIndexChange) {
                      onIndexChange(newIndex)
                  }
              }
          }}
  />

[dohooo]

If you're looking for a pagination, please see this example for more details: https://reanimated-carousel.dev/usage