Maximum update depth exceeded when loop is true

[Vadko]

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

Bug report

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

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] 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

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

Both (Write your answer here and specify the iOS/Android versions on which you've been able to reproduce the issue.)

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

Yes

Environment

React: 17.0.1
React native: 0.64.2
react-native-snap-carousel: 3.9.1

Target Platform: Android (10.0) iOS (14.4)

Expected Behavior

Working loop mode

Actual Behavior

App crashes when loop passed as true

Reproducible Demo

(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.)

Snack example doesnt work for react-native-snap-carousel. It returns error: Cannot read property style of undefined

Steps to Reproduce

const CarouselImage: FC<CarouselImageProps> = ({item}) => {
  const [isImageLoading, setIsImageLoading] = useState(true)
  const onLoadStartImage = () => setIsImageLoading(true)
  const onLoadEndImage = () => setIsImageLoading(false)
  return (
    <View style={styles.wrapper}>
      <Image
        style={styles.image}
        source={{uri: item?.url}}
        resizeMode="cover"
        onLoadStart={onLoadStartImage}
        onLoadEnd={onLoadEndImage}
      />
      {isImageLoading && (
        <ActivityIndicator
          style={styles.imageLoader}
          color={Colors.green}
          size="large"
        />
      )}
    </View>
  )
}

  const restaurant_photos = [
    {
        "url": "https://diningout-dev.s3.amazonaws.com/images/restaurants/Bang Up To The Elephant!/e9535f1f-fb52-4f91-8713-0dd8408f1796"
    },
    {
        "url": "https://diningout-dev.s3.amazonaws.com/images/restaurants/Bang Up To The Elephant!/8426d038-ad27-482a-8e56-98b1c0617ab5"
    },
    {
        "url": "https://diningout-dev.s3.amazonaws.com/images/restaurants/Bang Up To The Elephant!/54d78642-3bd9-4a09-80b5-753fae26e922"
    }
]

<Carousel
          data={restaurant_photos}
          keyExtractor={item => item.url?.toString()}
          renderItem={({item}: {item: RestaurantPhoto}) => (
            <CarouselImage item={item} />
          )}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={Dimensions.get('window').width}
          sliderHeight={Dimensions.get('window').height * 0.35}
          removeClippedSubviews={true}
          loop={true}
          inactiveSlideScale={1}
        />

[dohooo]

@Vadko 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

[jameswilddev]

Additionally reproduced on iOS. It only seems to happen with certain numbers of items, e.g. 1 works, 2 doesn't, 3 does, 4 does.

[RuzenDev]

Facing the same problem. Has anyone solved this issue?

Its something to do with the length of the data and the loopClonsesPerSide