[Expo SDK 50] [alpha.x] Weird animation issue

[BrodaNoel]

Describe the bug I had upgraded to Expo SDK 50, and now I'm getting a cosmetic issue.

I'm going to upload a video in the following comment, showing what is happening.

I was using alpha0 with SDK 49 and this issue was NOT pressent. I tried alpha0 on SDK 50 and alpha10, and in both situations the issue still there.

If you check in the video, there are 2 different Carousels. Here are the implementations:

// first carousel in the video
<Carousel
          ref={ref => (this.carousel = ref)}
          mode="parallax"
          loop={false}
          scrollAnimationDuration={200}
          width={WIDTH}
          height={HEIGHT}
          data={spots}
          renderItem={SpotPreviewWrapper}
          windowSize={2}
          onSnapToItem={this.onIndexChange}
          modeConfig={{
            parallaxScrollingScale: 0.75,
            parallaxAdjacentItemScale: 0.75,
            parallaxScrollingOffset: 80,
          }}
        />

// second carousel in the video
<Carousel
            data={images}
            loop={false}
            scrollAnimationDuration={200}
            renderItem={({ item, index }) => this._renderItem({ item, index }, PHOTO_HEIGHT)}
            width={DEVICE_WIDTH}
            height={PHOTO_HEIGHT + USER_BOX_HEIGHT}
            onSnapToItem={this.onImageChange}
            enabled={images.length > 1}
            windowSize={3}
            onConfigurePanGesture={gestureChain => {
              gestureChain.activeOffsetX([-10, 10]);
            }}
          />

All these carousel were working well since years ago.

Screenshots Video in the next comment

Versions (please complete the following information):

• react: 18.2.0
• react-native: 0.73.6
• react-native-reanimated: ~3.6.2
• react-native-reanimated-carousel: 4.0.0-alpha.10
• react-native-gesture-handler: ~2.14.0

Smartphone:

• Device: iPhone 13 mini
• OS: iOS 17.4.1 (latest at this time)

[dosubot[bot]]

Hello @BrodaNoel! 👋 I'm Dosu, a bot here to assist you with bug resolutions, answer your questions, and guide you on becoming a contributor. While you're waiting for a human maintainer, I'm here to help you out. I'm currently reviewing your issue about the animation problem you're facing with react-native-reanimated-carousel on Expo SDK 50 and will get back to you shortly with a more detailed response. Stay tuned!

[BrodaNoel]

https://github.com/dohooo/react-native-reanimated-carousel/assets/1837969/864c2c80-25be-4fd6-928d-95957aeda0e5

[BrodaNoel]

BTW, yes, my component is wrapper with GestureHandlerRootView.

[BrodaNoel]

This issue seems to be quite similar to the one that is being solved in https://github.com/dohooo/react-native-reanimated-carousel/pull/576

It maaay be fixed after merging it.

[dosubot[bot]]

The issue you're experiencing with the react-native-reanimated-carousel animations after upgrading to Expo SDK 50 seems to be recognized and potentially addressed by the ongoing work in pull request #576. This pull request aims to solve animation-related problems that could be affecting your carousels. It's advisable to monitor the progress of this pull request and test your application once the changes are merged to see if the issue resolves. In the meantime, ensure that all your dependencies are up to date and consider checking if there are any known workarounds or additional configurations required for the new SDK version that might temporarily alleviate the issue.

#### Details

**About Dosu** This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[BrodaNoel]

I'm having the same issue with the minimum version of this Carousel:

  render() {
    const { spots } = this.state;

    if (spots && spots.length) {
      return (
        <Carousel
          // ref={ref => (this.carousel = ref)}
          // mode="parallax"
          // loop={false}
          // scrollAnimationDuration={200}
          width={WIDTH}
          height={HEIGHT}
          data={spots}
          renderItem={SpotPreviewWrapper}
          // windowSize={2}
          // onSnapToItem={this.onIndexChange}
          // modeConfig={{
          //   parallaxScrollingScale: 0.75,
          //   parallaxAdjacentItemScale: 0.75,
          //   parallaxScrollingOffset: 80,
          // }}
        />
      );
    }

    return null;
  }

https://github.com/dohooo/react-native-reanimated-carousel/assets/1837969/df99f96e-4f4a-4a56-974c-e84f2739676e

[BrodaNoel]

@dohooo after implementing the changes on https://github.com/dohooo/react-native-reanimated-carousel/pull/574 and https://github.com/dohooo/react-native-reanimated-carousel/pull/576, and creating a patch with them, it looks to be IMPROVED. Not fixed... but the issue got a bit better

And seems like the one who improved it was 574

[BrodaNoel]

This is the new behavior after implementing 574 and 576

https://github.com/dohooo/react-native-reanimated-carousel/assets/1837969/187c7f4e-51b2-4701-9bdb-57cf65268189

[BrodaNoel]

Check the "image indicator" (1/2 photos... 2/2 photos), in the middle, below, inside the photo.

That number is the current index of the carousel. In the video you can see that it doesn't move properly when you swipe the photo to change it. It seems like it's called later or something like that.

https://github.com/dohooo/react-native-reanimated-carousel/assets/1837969/71a9ccfa-1897-4802-acd4-487aa08d0d8f