Swiper does not start at initial index, unless I set loop to false

[thesubway]

Which OS ?

iOS

Version

Which versions are you using: React 16.0.0-alpha.12

• react-native-swiper v? 1.5.9
• react-native v0.?.? 0.46.0

Expected behaviour

Upon launch, start at the first page

Actual behaviour

Upon launch, starts at the last page

How to reproduce it>

export default class App extends Component { constructor(props) { super(props); this.state = { }; } render() { return (

) } } AppRegistry.registerComponent('AwesomeProject', () => App); ### Steps to reproduce 1.Create App Component using the above code 2.Add styles variable from the README 3.Do not set the loop property When I set Swiper loop={false}, there is no issue. In that case, it correctly starts at the initial page.

[dwilt]

@thesubway I ran into this too. This is indeed a bug. Do you have flex: 1 on the Swiper as a style? If so, try and remove it. That fixed it for me.

[arribbar]

Do you still have the bug @thesubway ? If yes, can you fork the project and reproduce the bug? I have not enough time to do it on my own. Thanks

[thesubway]

Here is an example of my issue, reproduced, where page 2 shows up first: https://github.com/thesubway/IssueTester

[jketcham]

I'm also experiencing a variant of this issue, except on initial render the index is fine but on subsequent renders, the last slide is shown even though the index is still 0. Setting loop to false fixes this, so I imagine there's something wrong with how offset is calculated in relation to looping.

[arribbar]

It looks like this is the same bug than #570. Can you try again with the last version released yesterday, 1.5.13. This PR https://github.com/leecade/react-native-swiper/pull/572 has been merged and should fixed this bug. If not, reopen this issue. Thanks!

[bispul]

its still not working on 1.5.13. does anyone have a fix ?

[hugweb-zz]

I don't know if it's exactly the same issue but when loop is set to TRUE and I reach the last slide : the old state is display (of the page) before displaying the current one which create a glitch.

I think the problem is located in the updateIndex method and more particularly in the setState method.

if (loopJump) {
      // when swiping to the beginning of a looping set for the third time,
      // the new offset will be the same as the last one set in state.
      // Setting the offset to the same thing will not do anything,
      // so we increment it by 1 then immediately set it to what it should be,
      // after render.
      if (offset[dir] === this.internals.offset[dir]) {
        newState.offset = { x: 0, y: 0 }
        newState.offset[dir] = offset[dir] + 1
        this.setState(newState, () => {                     <========== here
          this.setState({ offset: offset }, cb) 
        })
      } else {
        newState.offset = offset
        this.setState(newState, cb)
      }
    } else {
      this.setState(newState, cb)
    }

Here you can see what I mean. Changing something on the page scrolling left/right to come back and you see the glitch

Any ideas @leecade?

[dktan]

init offset is set in onLayout function, and onLayout is not called when view update. So, your problem was content loaded after page rendered, and all you layout was still set up as you have no children. Quick work around: do not render swiper until all image loaded.

but still I think is fair to ask a swiper library to handle content update.

[windydang26]

version 1.5.13 still not working. index changed to 0 but screen still is last screen.

[kevinEsherick]

@windydang26 Still not working for me either. I have just set loop to false, since looping isn't critical for me, and that fixes it, but it would be nice if we could find the solution. I believe it only happens upon touch events in which setState is called, as someone hinted to previously. If at index 0, when setState is called it remains at index 0 but displays the content of the final index. It also prevents you from swiping right (looping back to the final index) when this occurs. Then when you swipe left it returns to the proper display of the 0 index. Maybe that helps someone better understand the problem, not sure. But if looping isn't critical then turning it off is an easy fix

[CallmeJay]

still can't work.help me

[joelbowen]

I think this issue should be re-opened. I am experiencing a similar issue:

• it shows my second page briefly, then goes to my first page

Setting loop to false resolves the issue, but certainly isn't ideal.

[byunghyunpark]

I have the same bug on 1.5.13 version

[evanyz]

same issue on 1.5.13 and 1.5.14

[Lelelo1]

For me this issue occurs on second render. version 1.5.14. Doing something that triggers a render like pressing a button outside of this component makes it go from index 0 to last index.

[pgonzalez-santiago]

Same here

[ekSec]

Same Here

[karmatobgyel]

same here. on ios , it wont swipe left at the first swipe.

[alikianinejad]

same here

[mattgilbertnet]

same here

[reflexator]

Anyone find solution for this?

[emp]

on initialization, swiper.slideToLoop(0, 0) did it for me

React example, I want to only have a loop when I have more than one image:

useEffect(() => {
    if (swiperInstance && images.length > 1)
      swiperInstance.slideToLoop(0, 0)
  }, [images, swiperInstance]);

<Swiper loop={images.length > 1}>

[alan-automationworks]

on initialization, swiper.slideToLoop(0, 0) did it for me

React example, I want to only have a loop when I have more than one image:

useEffect(() => {
    if (swiperInstance && images.length > 1)
      swiperInstance.slideToLoop(0, 0)
  }, [images, swiperInstance]);

<Swiper loop={images.length > 1}>

This worked for me, @emp. Thank you. But I'm wondering, is it not a bad idea to pass a ref to an useEffect?