Jacse / react-native-app-intro-slider

Simple and configurable app introduction slider for react native
MIT License
1.65k stars 330 forks source link

AppIntroSlider.goToSlide() is not a function (JS) #207

Open diamantisufi opened 4 years ago

diamantisufi commented 4 years ago

I wanna have a skip in top right, when I try to use goToSlide, i'm getting AppIntroSlider.goToSlide() is not a function..

Jacse commented 3 years ago

Could you paste your code? Are you setting/getting the ref correctly?

rahulsharmaretailcore commented 3 years ago

using function-based component

export default function IntroScreen() { const slider = AppIntroSlider;

rahulsharmaretailcore commented 3 years ago

i got the answer:

<AppIntroSlider ref={(ref) => (slider = ref)} />

need to put the reference only.

complete code:

`export default function IntroScreen() { let slider = "";

                       return (
                          <AppIntroSlider ref={(ref) => (slider = ref)} data={slides} showNextButton={false}  renderItem={renderItem} renderPagination={renderPagination}/>
                    )
   }`
Keshavdulal commented 2 years ago

For anyone stumbling over here, here's how to use gotoSlide with useRef hook. I've skipped other stuff that is covered on docs.

import React, { useRef } from 'react'
import AppIntroSlider from 'react-native-app-intro-slider'

const MyComp = () =>{
let slider = useRef()

  const _onDone = () => {
    // ...do navigation or other stuffs
    // I wanted the slider to reset to 1st slide once user goes through them all
    // so that in future if the user ever comes out of app, they will see the 1st slide
    slider?.goToSlide(0)
  }

  return (
    <AppIntroSlider
      ref={ref => (slider = ref)}
      renderItem={_renderItem}
      data={slides}
      onDone={_onDone}
    />
  )
}