React Native Upgrade V.6.4.1 Scroll View Issue

[Olivia Porter]

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 ( <View style={styles.full}> <Swiper useViewOverflow={Platform.OS === "ios"} marginBottom={50} ref={(r) => (swiperRef = r)} cards={queue} renderCard={(item) => { if (!item) { return null; } return ( <MatchCard match={item} onLike={(index) => 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" /> </View> );

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}} /> <View style={styles.detailView}> <BoldText style={styles.interestsTitle}> INTERESTS </BoldText> <View style={styles.interestList}> {interests.map((interest, index) => ( <InterestCard key={index} title={interest} /> ))} </View> </View> <Slideshow height={400} dataSource={[{url: images[1]}, {url: images[2]}]} />...

[Jacques de Villiers]

See #324

[Nes Croft]

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