The swipe functionality does not work on the subsequent cards after swiping the first card.

[omercandemir]

The swipe functionality does not work on the subsequent cards after swiping the first card.
I encounter this issue when trying to swipe or simply tapping on the screen. However, when I place buttons and perform the swipe actions using those buttons, I do not experience any issues. But if I initially perform the swipe manually by dragging, the animation gets disrupted and the swipe buttons no longer work.

Ekran.Kaydi.2023-07-14.15.26.11.kopyasi.mov

(Please ignore the duplicate images in the last set of data. Focus on the names instead.)

My Code:

<View style={{flex: 1}}>
                <Swiper
                    useViewOverflow={Platform.OS === 'ios'}
                    // @ts-ignore
                    ref={swiper}
                    cards={data}
                    disableBottomSwipe={true}
                    disableTopSwipe={false}
                    cardStyle={{
                        top: 0,
                        left: 0,
                        bottom: 0,
                        right: 0,
                        width: 'auto',
                        height: 'auto'
                    }}
                    renderCard={(card) => {
                        return (
                            <View style={{flex: 1, margin: 10, marginVertical: 0, borderRadius: 10}}>
                                <Image source={{uri: card.image}} style={{width: windowWidth - 20, height: '100%', borderRadius: 10}} />
                                <View style={styles.userInfoContainer}>
                                    <Text style={styles.userName}>{card.name+", "+card.age}</Text>
                                </View>
                                <CardBackdrop />
                            </View>
                        )
                    }}
                    overlayLabels={{
                        bottom: {
                          title: 'BLEAH',
                          style: {
                            label: {
                              backgroundColor: 'black',
                              borderColor: 'black',
                              color: 'white',
                              borderWidth: 1
                            },
                            wrapper: {
                                flexDirection: 'column',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }
                          }
                        },
                        left: {
                            title: 'NOPE',
                            style: {
                                label: {
                                backgroundColor: 'black',
                                borderColor: 'black',
                                color: 'white',
                                borderWidth: 1
                                },
                                wrapper: {
                                    flexDirection: 'column',
                                alignItems: 'flex-end',
                                justifyContent: 'flex-start',
                                marginTop: 30,
                                marginLeft: -30
                                }
                            }
                        },
                        right: {
                            title: 'LIKE',
                            style: {
                                label: {
                                  backgroundColor: 'black',
                                  borderColor: 'black',
                                  color: 'white',
                                  borderWidth: 1
                                },
                                wrapper: {
                                  flexDirection: 'column',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  marginTop: 30,
                                  marginRight: 30
                                }
                              }
                            },
                        top: {
                            title: 'SUPER LIKE',
                            style: {
                                label: {
                                  backgroundColor: 'black',
                                  borderColor: 'black',
                                  color: 'white',
                                  borderWidth: 1
                                },
                                wrapper: {
                                  flexDirection: 'column',
                                  alignItems: 'center',
                                  justifyContent: 'center'
                                }
                            }
                        }
                    }}
                    animateOverlayLabelsOpacity
                    onSwipedLeft={() => onSwiped('left')}
                    onSwipedRight={() => onSwiped('right')}
                    onSwipedTop={() => onSwiped('top')}
                    onSwipedBottom={() => onSwiped('bottom')}
                    onSwipedAll={() => {console.log('onSwipedAll')}}
                    onSwiped={(cardIndex) => setCardIndex(cardIndex)}
                    backgroundColor={'white'}
                    cardIndex={cardIndex}
                    stackSize= {3}
                >
                    
                </Swiper>
            </View>

[KMuteteke]

I am expeiencing the same thing!

[IslamElswafy]

i was facing the same problem but when i change the version of Expo in your project from "^49.0.0" to "^48.0.0", and did the same in react native form 0.72 to 0.71 it work

[psuedoForce]

I am experiencing the same thing. Subsequent swipes are not working on react-native-cli

[omercandemir]

I will test it in react-native version 0.71.11 soon and post the results here.

[Lamonarch87]

Hi Guys,

this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

[mohitkale]

Hi Guys,

this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

Perfect @Lamonarch87 .... I would recommend you to fork the repo and create a PR so that the author can merge it

[webraptor]

fixed by webraptor#112 (review) version 2.0.15

[a396901990]

Hi Guys,

this is the current resetPanAndScale function.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 }) 
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
}

This is the working one.

resetPanAndScale = () => {
    const {previousCardDefaultPositionX, previousCardDefaultPositionY} = this.props
    this.state.pan.setValue({ x: 0, y: 0 })
    this.state.pan.setOffset({ x: 0, y: 0})
    this._animatedValueX = 0
    this._animatedValueY = 0
    this.state.previousCardX.setValue(previousCardDefaultPositionX)
    this.state.previousCardY.setValue(previousCardDefaultPositionY)
    this.state.pan.x.addListener(value => this._animatedValueX = value.value)
    this.state.pan.y.addListener(value => this._animatedValueY = value.value)
}

I found that after the swipe, the listener is unsubscribed even if no unmount was triggered.

still have this issue using this fix on 0.72.x

[alex-paczeika]

Hello, it's the same issue with 0.72.X. Can you please check?

test_QUQOz4Wh.mp4

[webraptor]

Hello, it's the same issue with 0.72.X. Can you please check?

test_QUQOz4Wh.mp4

Based on the attached video the swiper works but you're changing the contents of the deck externally

[flikQ]

This appears to be happening for me also - on RN 0.73.8 & 2.0.16 of Deck Swiper

[Jedidiah]

Updating to 2.0.17 appears to have solved the issue for us 🎉