react-nativeexpocarouselhybrid-mobile-app

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


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} />

Solution

  • 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