When swiping react native app - screens shows twice

Question

Live example https://snack.expo.dev/su1-U5DZc

If I swipe screens with buttons - everything okay, but if I swipe with gesture - screens shows twice. Why so? Does this setWtf(state.index);

const onTouchStart = (e, state, context) => {
        console.log('onTouchStart: ' + state.index);
        setWtf(state.index);
    };

make index stored somewhere by reference and then get updated?

Answer 1

Yes it was due to setWtf(state.index);. There is a reported bug of render issue when updating state in their official git page.

They are saying to downgrade react-native-swiper to version 1.5.5 or you could follow other solutions mentioned here : Update the state breaks the slides

Answer 2

Without more information, it's impossible to pinpoint the exact cause of the problem you're experiencing, although it's conceivable that the problem is connected to the way your code handles touch events.

Your code is probably adjusting the value of state.index depending on the gesture when you swipe between screens, and then refreshing the screen display based on the value of state.index. The screen display may update twice if state.index is being updated by reference because the value is being modified twice: once by the gesture and once by the setWtf function.

Using a different variable to hold the current screen index and only updating the value of state.index when the user interacts with the buttons is one potential fix for this problem. This should prevent the screen from being displayed more than once and ensure that the value of state.index is only modified once.

It's important to keep in mind that the setWtf function you specified in your query could not be connected to the problem you're having. Without more information, it's difficult to say for sure whether this function is being used to update another state in your application.

Answer 3

import Swiper from 'react-native-swiper';

<Swiper
containerStyle={{ flex: 1, position: 'absolute', bottom: 0, left: 0, right: 0, top: 0 }}>
</Swiper>

This one solved updating the state when swiping. Try this