onIndexChanged setState change shifts Swiper component until tapping resets to correct style

[salp13]

OS 14.4

Version

Which versions are you using:

• react-native-swiper v1.6.0
• react-native v0.62.13

Expected behaviour

When user swipes on component, it should move to next page. Currently I have onIndexChange triggering a change in state (for a variable that isn't the index -- it is something to change a tab header). setState should execute properly and the page change should animate properly with the left hand side of the page stopping at the beginning of the parent view

Actual behaviour

The setState changes properly, and the swipe to the next page animates properly; however, the page swiped to goes past the parent view's margins (about 40 pixels or so). It remains off the end until I click anywhere within the Swiper view and then it immediately goes back to how it should be (not shifted off the edge). I have tried specifying height, width, container style, and index value, but nothing has worked except simply not calling setState. I have also tried onMomentumScrollEnd or using a setTimeout with both trigger functions with the same results. Interesting to note that it does not happen to the first page, but all after the first one (going in either direction) even when the initial index specified isn't the first page.

How to reproduce it>

• loop is false, showPagination is false, onIndexChanged triggers a setState for a toggle value not used anywhere within the Swiper children.

[i3i2uno]

@salp13 any luck with this? Running into the same issue

[ryan-exe]

I was experiencing this issue as well ^

I was wrapping my <Swiper> with some padding in the parent above.

// Broken version

<View style={{ paddingHorizontal: 24 }}>
    <Swiper>
    ...
    </Swiper>
</View>

I was able to fix the issue by moving the padding component inside of the <Swiper> like so;

// Fixed version

<Swiper>
    <View style={{ paddingHorizontal: 24 }}>
    ...
    </View>
</Swiper>

[derick-bai]

I think @ryan-exe 's solution is onto something. I ran into very similar situation. Did not dig into the code but my educated guess is that some calculation (maybe the scrolling offset or the transition distance for animation) is based on width of the screen, not the actual width of the component.

For my case, as long as I have any margin or padding on the parent container of the Swiper, setting state in onIndexChanged will cause the issue described above. The way I solved my problem is to let the Swiper take the entire width of the screen, and use its containerStyle prop for the spacing I needed.

[dngconsulting]

Have the same problem here. I don't have any padding and I can't let the swiper take the entire width of the screen as it acts as a popup/overlay inside my screen. Is it dead ?

[grant-devon]

Facing the same issue here. I cant wrap my components inside the swiper module as I need them to be outside