Only one card visible after update to react native 0.76

[padoski]

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.

[rbayramo]

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.

[HexaaJS]

Exact same issue on my side, please help !

stackSize={amount} + showSecondCard={true}

isn't working anymore

[bartoszstepien01]

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

[HexaaJS]

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.

[epifye]

                    ` 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.

[leo0grau]

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.

[batuhanbag]

@leo0grau wrap with a view and put that style, it'll be solved

[urminv]

+1