goToSlide method shift the slider to correct slide number but didn't show correct slide

[hkar19]

What i use

"react-native": "0.60.5",
"react-native-app-intro-slider": "^3.0.0"

My issue

my App Intro Slider can move to the correct slide when goToSlide called but the modal keep showing the first slide. I know the slide has moved to the intended slide because the back button is showing and no done/next button.

this is my code

const myModal = ({show})=>{

  useEffect(() => {
    getData()
    if (sliderRef.current && lastSlide == true){
        console.log("JUMPING SLIDE!", sliderRef.current)
        Platform.OS == 'ios' ? sliderRef.current.goToSlide(2) : sliderRef.current.goToSlide(1)
      }
  },[show]);

  var slides = [
    {
      key: 'k2',
      title: string.header_1,
      text: string.text_1,
      button: string.button_1,
      url: string.url1,
    },
    {
      key: 'k3',
      title: string.header_3,
      text: string.text_3,
      button: string.button_3,
    }
  ]

  return(
   <GModal
      visible = {show}
      onRequestClose = {onRequestClose}
      fitContent = {true}
      isSlider = {true}
      contentRender = {
        <View style = {{alignSelf: "center"}}>
          <AppIntroSlider
            ref = {sliderRef}
            renderItem = {_renderItem}
            renderPrevButton = {_renderPrevButton}
            renderNextButton = {_renderNextButton}
            doneLabel = {''}
            showPrevButton = {true}
            slides = {slides}
          />
        </View>
      }
    />
  )
}

[hkar19]

this is also happening in 4.0.4.

Interestingly, in 3.0.0, this bug only appears in debug mode and it does not appear in release mode. But for 4.0.4, it also appears in release mode.

[hkar19]

Apparently, there is problem on my side when i force the state width and height (due to issue #237) respectively to Dimensions.get('screen')'s width and screen, but the onLayout of the class (this line), will yield different width, so when on this line, the offset will yield different value (a little higher on my case)

my last slide (slide 7) supposedly has offset of 2348.5713500976562 (6 * 391.4285583496094), but when i just mount AppSlider, the offset is 2468.5714285714284 (6 * 411.42857142857144, this is from Dimensions.get('screen').width).

Aaaaand

on my ComponentDidMount, i did:

setTimeout(()=>{
        this.goToSlide(this.state.slides.length -1);
      },200)

the slider will show the first slide, but after 200ms, it shows the correct slide.

[italomlp]

Your solution worked for me, thanks. Even with the 200ms of "delay", since we have an update checker in the beginning, that is showed above the rest of the app, the delay will never be seen by the user.

[wicfasho]

The slides aren't counted in the correct order of indexes. Your first slide can be index 2 instead of 0 (in my case) So, you should use this.current.state.activeIndex to detect the activeIndex before adding or subtracting from the goToSlide counter param.

e.g

let activeIndex = this.current.state.activeIndex
// this assumes there are 3 slides
this.current.goToSlide( (activeIndex >= 2) ? 0 : activeIndex + 1 )

You can also add true as a second param to goToSlide to trigger onSlideChange