alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.55k stars 461 forks source link

React Native Upgrade V.6.4.1 Scroll View Issue #304

Open oporter1 opened 4 years ago

oporter1 commented 4 years ago

When I upgraded RN to version 0.6.4.1 Swiper stopped working. I am no longer able to vertically scroll through the cards but I can still swipe to the right and left.

I get an error:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

So I have tried a number of things to "un-nest" these scroll views but have had no luck. I am curious if this error has been seen before by other people and what they have done to resolve it. I need my cards (located in MatchCard) to be scrollable. Does the Swiper have a flatlist in it already? This was working before the upgrade to RN and all of my other scrollable components are working fine.

`return (

(swiperRef = r)} cards={queue} renderCard={(item) => { if (!item) { return null; } return ( liked(index)} onDislike={(index) => liked(index)} onMeg={() => swiperRef.reshuffle()} /> ); }} onSwipedLeft={(index) => disliked(index)} onSwipedRight={(index) => liked(index)} backgroundColor={Colors.Transparent} cardVerticalMargin={0} cardHorizontalMargin={0} verticalSwipe={false} onSwipedAll={swipedAll} stackSize={2} pointerEvents="box-none" />
);`

match card:

`return ( <ScrollView style={style.card} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false} onLayout={({ nativeEvent: { layout: {width, height}, }, }) => setHeightWidthState({...state, width, height})}> <View style={{flex: 1}}> <MatchImage match={match} name={fullName} location={currentLocation.name} imageDimensions={{width, height}} />

INTERESTS {interests.map((interest, index) => ( ))}
    <Slideshow
      height={400}
      dataSource={[{url: images[1]}, {url: images[2]}]}
    />...`
jacquesdev commented 4 years ago

See https://github.com/alexbrillant/react-native-deck-swiper/issues/324

nescroft commented 3 years ago

i think the issue is actually that the renderOverlayLabel has a width and height of 100% and a flex:1 with absolute position so it is covering the scrollview.. the 'like' and 'nope' is covering the scrollview. at least that is part of the issue. in swiper.js