webraptor
Only one card visible after update to react native 0.76
As in title only one card visible after update to react native 0.76, to reproduce this bug just create expo blank expo project with sdk 0.52 which use 0.76 react native version and no matter stacksize, no matter stackSeparation, only first card is visible, and after scrolling it, then next one appear. So swiping is working, bust stack is not visible, just card which is first in front.
I have the same issue. But its not just that.
After swiping the first card it appears like the image I attached. only the card behind is swipeable. the first/small card is not swipeable. Should we expect an update or just switch to an other card library?
The new architecture seems like breaking things.
Exact same issue on my side, please help !
stackSize={amount} + showSecondCard={true}
isn't working anymore
The issue appears to be caused by the negative z-index values assigned to the cards beneath the first one.
What fixed the problem for me was changing
const styles = StyleSheet.create({
...
container: {
alignItems: 'stretch',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
...
}
to
const styles = StyleSheet.create({
...
container: {
alignItems: 'stretch',
position: 'relative', // HERE
top: 0,
left: 0,
right: 0,
bottom: 0
}
...
}
in styles.js
Okay i found a solution that worked for me :
this i what my Swiper code looks like :
<Swiper
ref={swiperRef}
cards={users}
renderCard={renderCard}
onSwipedRight={handleSwipeRight}
onSwipedLeft={handleSwipeLeft}
onSwipedAll={handleSwipedAll}
backgroundColor={'transparent'}
cardIndex={currentIndex}
disableBottomSwipe
disableTopSwipe
useViewOverflow={true}
stackSize={3}
animateOverlayLabelsOpacity
showSecondCard={true}
overlayLabels={{
left: {
title: "NOPE",
style: {
label: {
backgroundColor: 'rgba(255, 0, 0, 0.4)',
color: 'white',
fontSize: 34,
borderRadius: 10,
width: Dimensions.get('window').width * 0.9,
height: Dimensions.get('window').height * 0.65,
textAlign: 'center',
textAlignVertical: 'center',
position: 'absolute',
top: 0,
left: 0,
},
wrapper: {
flexDirection: 'column',
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
marginLeft: 0,
width: Dimensions.get('window').width * 0.9,
height: Dimensions.get('window').height * 0.65,
position: 'absolute',
}
},
},
right: {
title: "LIKE",
style: {
label: {
backgroundColor: 'rgba(0, 128, 0, 0.4)',
color: 'white',
fontSize: 34,
borderRadius: 10,
width: Dimensions.get('window').width * 0.9,
height: Dimensions.get('window').height * 0.65,
textAlign: 'center',
textAlignVertical: 'center',
position: 'absolute',
top: 0,
left: 0,
},
wrapper: {
flexDirection: 'column',
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
marginLeft: 0,
width: Dimensions.get('window').width * 0.9,
height: Dimensions.get('window').height * 0.65,
position: 'absolute',
}
},
},
}}
/>
</View>```
i got a styling for it "styles.swiperContainer"
` swiperContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
marginTop:70,
position: 'relative',
zIndex: 9999
},`
What i did is added around the Swiper code a container and what was missing was the z-index; 9999, just add this and it should be working
Hope that will work for you good luck friends.
` swiperContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%', marginTop:70, position: 'relative', zIndex: 9999 },`
For me, getting rid of "flex: 1" worked perfectly. It now stacks and the animation of the cards moving forward works as well.
sorry where did u put that ?, i cant fidn a swiperContainer on the props
` swiperContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%', marginTop:70, position: 'relative', zIndex: 9999 },`For me, getting rid of "flex: 1" worked perfectly. It now stacks and the animation of the cards moving forward works as well.
