diff --git a/example/website/pages/props.mdx b/example/website/pages/props.mdx index 39e00168..f28fdd40 100644 --- a/example/website/pages/props.mdx +++ b/example/website/pages/props.mdx @@ -408,6 +408,89 @@ Slide direction ## Ref +By using these methods, remember you need to reference the component using [React useRef()](https://react.dev/reference/react/useRef). + +**JavaScript** + +```js +const ref = React.useRef(null) +``` + +If you're using **TypeScript**: + +You need to import: + +```ts +import type { ICarouselInstance } from "react-native-reanimated-carousel"; +``` + +and then: + +```ts +const ref = React.useRef(null); +``` + +Now, you only need to pass the ref to the Carousel component: + +```js +; +``` + +And now you can use these methods throughout your component. Here's an example of implementing a button to go to the next slide: + +```tsx +import React from "react"; +import Carousel from "react-native-reanimated-carousel"; +import type { ICarouselInstance } from "react-native-reanimated-carousel"; +import { Button, Text, View } from "react-native"; + +// 1. Create a data array with the slides +const data = [ + { + title: "Slide 1", + content: "Slide 1 Content", + }, + { + title: "Slide 2", + content: "Slide 2 Content", + }, + { + title: "Slide 3", + content: "Slide 3 Content", + }, +]; + +const Example = () => { + const ref = React.useRef(null); // 2. Create a ref for the Carousel component + + return ( + + {/* 3. Add the Carousel component with the ref */} + ( + + {item.title} + {item.content} + + )} + /> + {/* 5. Add a button to trigger the next slide */} +