The swipe functionality does not work on the subsequent cards after swiping the first card.
omercandemir opened this issue · comments
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>
I am expeiencing the same thing!
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
I am experiencing the same thing. Subsequent swipes are not working on react-native-cli
I will test it in react-native version 0.71.11 soon and post the results here.
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.
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
fixed by webraptor#112 (review) version 2.0.15
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
Hello, it's the same issue with 0.72.X. Can you please check?
test_QUQOz4Wh.mp4
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
This appears to be happening for me also - on RN 0.73.8 & 2.0.16 of Deck Swiper