React-native-swiper: Every time the swiper re-renders the image changes to the last one but index remains 0

[preto89]

MacOS

Version

Which versions are you using:

• react-native-swiper v1.5.14
• react-native v0.57.7

Expected behaviour

expected image to be the first one since the dot is

Actual behaviour

when i re-render the swiper by switching navigation pages the dot remains correct in the first slide but the image appears to be the last one, if i disable loop, the problem doesn't happen, but i need looping, please fix this

How to reproduce it>

• create a list of elements with swipers, use react navigation to switch page and return to the list again for the component to re-render, the image will switch to the last one but index and dot are still 0

Please fix this, try forcing the image or something, i need looping

[bogrees]

I am seeing the same behavior on iOS. Setting loop={false} does indeed fix it, but not ideal.

[preto89]

Ive found a workaround for this bug, works only depending on the implementation, this was happening when i applied filters to a list and it re-renders.
My workaround to have loop was to show up a loader with a 500ms timeout before i switch to the list page again. it seems that by removing the content and putting it back again the image gets fixed, but this is still an issue that needs to be solved. many people probably cant do this workaround.

[orangecoloured]

Another way to avoid this is to specify the key prop to force re-render. For example key={Date.now()}.

[mohamedsabrymowesolutions]

@orangecoloured can you specify a real way this makes the component keeps flashing

[orangecoloured]

@mohamedsabrymowesolutions no idea, maybe you could use AppState.currentState instead. It flashes because it's forced to update on every parent component update.

[mohamedsabrymowesolutions]

I found the issue in component will wait for props and edited it

On Thu, Dec 27, 2018 at 2:43 PM RCKT [e-mail] wrote:

@mohamedsabrymowesolutions https://github.com/mohamedsabrymowesolutions
no idea, maybe you could use AppState.currentState instead. It flashes
because it's forced to update on every parent component update.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/leecade/react-native-swiper/issues/906#issuecomment-450144021,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Arbg8SkYDlNybMzbq4q-Ha0JGX7q_LdFks5u9MB-gaJpZM4ZV96n
.

[libaoxu]

这么多star的框架, 为什么有这么明显的问题? 还不修复?

[expouic]

Same issue here...

[JinHoSo]

Same issue here

[Green-loutre]

same issue... I disabled the loop but then the arrows are doing weird things (only 1 when 2 are waited)

[ospfranco]

Having the same issue

[zyyace]

I also solved this problem by setting key={Date.now()} on Swiper component, good luck

[canturkm]

Hello,

I need both key set to list.length and loop set to true.

So I solved the problem by adding minimal code into the react-native-swiper code.

I added this:

componentDidUpdate (prevProps, prevState) {
    this.scrollBy(0,false);
}

Hacky way, but worked.

My swiper configuration:

<swiper ref="swiper" :key="list.length" :loop=true :showsPagination=false v-bind:onIndexChanged="swipeIndexChanged">

I'm using vue-native (which actually translates vue code to react-native). However, this makes sense.

[blyscuit]

I've seen all kind of fixes to this similar problem. Read all issues related and @canturkm fixes my. Cheers