Call snapToNext in functional component

[Enigama]

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

Hello, I use functional component and when i try to call next slide programmatically like this example: `<Carousel // other props ref={carousel'} />

// methods can then be called this way onPress={() => { carousel.snapToNext() }} i have TypeError: ref.snapToNext is not a function. (In 'ref.snapToNext()', 'ref.snapToNext' is undefined) so i look what is inside my ref i found {current: {...}} and inside curent i fond my function `snapToNext.

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

(Check the step you've followed - put an x character between the square brackets ([]).)

• [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?

(Write your answer here.) yes

[jfbn]

In your example you have a typo with the ref prop.

[Enigama]

@jnbt this example from doc https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#reference-to-the-component

[Romick2005]

In example: ref={(c) => { this._carousel = c; }} your code: ref={carousel'} // what \' pointing to? Where is the declaration of carousel variable? If you are using this.carousel = React.createRef(); then you need to call it like this.carousel.current.snapToNext(), but if you would follow an example code you wouldn't have any issues using this._carousel.snapToNext().

[liplylie]

Can do:

const ref = React.useRef();
const onPress = () => ref.current?.snapToNext?.()

 <Carousel 
  {...}
   ref={ref}
/>

[dohooo]

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