how can i programatically move the carousel to the next item in react-native-reanimated-carousel?

Question

I'm having issues programmatically moving the carousel item to the next or previous item on button press.

I know I have to se the hook useCarouselController, but i can' t find anywhere to import this. it's neither on their site or repo. I've googled around but can't seem to find anything about this. I know it can be done, so if you've done anything like this, I'll apprecite it.

kindly help on this, thanks a lot

import { Carousel } from 'react-native-reanimated-carousel';

// Assuming you have a carouselController from useCarouselController
const { next } = carouselController;

// Your Carousel component
<Carousel
  defaultIndex={2}
  carouselController={carouselController}
  // other props
/>

// Your button
<Button title="Next" onPress={next} />

Answer 1

import type { ICarouselInstance } from "react-native-reanimated-carousel";

const YourComponent = () => {
const ref = React.useRef<ICarouselInstance>(null);

    return (
        <View>
            <Carousel
            ref={ref}
            defaultIndex={2}
            // other props
            />
            <Button title="Next" onPress={() => {
                ref.current.next()
            }} />
        </View>
    )

}

https://reanimated-carousel.dev/props#next

Scroll to next item, it takes one optional argument (count), which allows you to specify how many items to cross