Ability to pause or stop animation

[i8ramin]

Is your feature request related to a problem? Please describe. I am using the carousel to auto play and loop through items when the carousel is "in view". I would like to stop or pause the animation when the carousel leaves the viewport, but I cannot find a way to do this using the current methods available on the carousel ref.

Describe the solution you'd like It would be great if there was a stopAnimation() or equivalent available on the carousel ref.

Describe alternatives you've considered I've tried changing the value of autoPlay from true to false, but that does not seem to do the trick

Additional context My component looks like this:

<Carousel
  loop={hasEnoughItems}
  autoPlay={isInView && hasEnoughItems}
  snapEnabled={false}
  pagingEnabled={false}
  enabled={false}
  withAnimation={{
    type: 'timing',
    config: {
      duration: 25000,
      easing: Easing.linear,
    },
  }}
  autoPlayInterval={0}
  windowSize={Dimensions.get('window').width}
  width={142}
  height={175}
  style={{
    width: Dimensions.get('window').width,
  }}
  data={collection?.collection_items || []}
  renderItem={({ item: ci }) => (
    <DiscoveryCollectionCardImage item={ci.cart_item?.item} />
  )}
/>

[dohooo]

I've tried changing the value of autoPlay from true to false, but that does not seem to do the trick

Emm, If it doesn't work, maybe it's a bug. I'll check it.

[imyuanx]

I've tried changing the value of autoPlay from true to false, but that does not seem to do the trick

Hi, I have a minimal example, But it seems to work normally. I noticed you have hasEnoughItems, Can you log it?

// it's work
function App() {
  const [isAutoPlay, setIsAutoPlay] = useState(true);
    return (
        <View style={styles.container}>
          <Button title="auto play" onPress={() => {
            setIsAutoPlay(!isAutoPlay)
          }} />
            <Carousel
                autoPlay={isAutoPlay}
                width={300}
                height={150}
                style={styles.c}
                data={[1, 2, 3]}
                renderItem={({ item }) => <Text style={styles.t}>{item}</Text>}
            />
        </View>
    );
}

[dohooo]

I have tried that and it works normally. Maybe your state hasEnoughItems is wrong?

[dohooo]

I'll reopen this issue If you have any other questions.