useState in onSnapToItem breaks item display

[nikitawolfik]

Is this a bug report, a feature request, or a question?

Bug report.

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn't already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

Yes, it is an explicit react-native-snap-carousel bug

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

It is reproducible in Snack on iOS, iOS 12.2

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

Environment:
React: 16.8.3
React native: 0.59.2
react-native-snap-carousel: 3.8.0

Target Platform:
iOS (12.2)

Expected Behavior

While snapping between items, the active item would appear bigger.

Actual Behavior

While using

onScroll={Animated.event([{
            nativeEvent: { contentOffset: { x: scrollValue.current } },
          }])}

with Animated in order to interpolate colors for custom indicator
and also onSnapToItem with hooks calls inside, the snapped item where hooks were called become permanently inactive in terms of bigger display.

Removing onScroll or hooks from onSnapToItem fixes the issue, but I need both methods.

Reproducible Demo

This snack

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. Open the Snack
2. Swipe right, the back
3. Done< the bug is here

[skoob13]

I have the same issue with two items. When the first item is swiped by me, the interpolator won't work on any other swipe actions. I have downgraded a version to 3.7.5 and it works perfectly after that.

[omid-ebrahimi]

Same issue for me on Android 6

I confirm that using am useState hook inside onSnapToItem cause bug on carousel .

  const [carouselIndex, setIndex] = React.useState(initialIndex);

  const handleIndexChange = (index: number) => {
    setIndex(index);
  };

<Carousel
        data={productList}
        ref={refCarousel}
        style={fillContainer}
        sliderWidth={width}
        itemWidth={width}
        firstItem={initialIndex}
        onBeforeSnapToItem={handleIndexChange}
        keyboardShouldPersistTaps="always"
        renderItem={({ item, index }) => {
          return (
            <InventoryProductSheet
              key={item.id}
              productId={item.id}
              index={index}
              isFocused={index === carouselIndex}

            />
          );
        }}
      />

[dohooo]

Sorry, please allow me to advertise for my open source library! ~
I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2