goToSlide method shift the slider to correct slide number but didn't show correct slide
hkar19 opened this issue · 4 comments
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>
}
/>
)
}
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.
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.
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.
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