Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hkar19 opened this issue Nov 27, 2020 · 4 comments

Comments

@hkar19
Copy link

hkar19 commented Nov 27, 2020

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
Copy link
Author

hkar19 commented Apr 5, 2021

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
Copy link
Author

hkar19 commented Apr 5, 2021

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
Copy link

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
Copy link

wicfasho commented Dec 29, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants