react-native-card-stack-swiper Cards with scroll view unable to scroll

Even after setting verticalSwipe={false} on CardStack component. The responder for vertical swipes is still the CardStack component. The child Card component is unable to take swipe input to enable a ScrollView to work inside a Card. Is there a solution to enabling scroll views in cards?

Apr 17 '18 07:04 bchee

Did you try hacking it with zIndex / elevation?

Generally speaking, not sure putting scrollable elements inside a swipeable card is a good UX pattern for your users.

Apr 19 '18 15:04 novakben

I think this is an issue, i can not scroll content in card.

Nov 05 '18 14:11 hoangvuanhdevelopervn

I managed to scroll the content of the cards. Just make sure to not set flex: 1 in the scrollView contentContainerStyle prop. If you want to show an example code I'll be glad to help.

Jan 25 '19 21:01 matias91

I also would like this functionality. I don't understand how zIndex would help.

Aug 10 '19 09:08 NicWickman

I managed to scroll the content of the cards. Just make sure to not set flex: 1 in the scrollView contentContainerStyle prop. If you want to show an example code I'll be glad to help.

Could you share?

Aug 10 '19 13:08 NicWickman

@NicWickman, sorry for the delay. What I have is something like this:

<CardStack style={{ flex: 1, zIndex: 99 }} verticalSwipe={false}>
  <Card style={{ flex: 1 }}>
    <ScrollView style={{ flex: 1 }}>
       your content
    </ScrollView>
  </Card>
</CardStack>

I think that the zIndex: 99 in the CardStack is irrelevant to this problem, is just something that I needed for my use case, feel free to ignore it.

Good luck!

Sep 17 '19 16:09 matias91

Have anyone resolevd it? My card still got stuck sometimes. @lhandel

Jan 12 '21 10:01 mitesh-db

same, did anyone manage to solve this?

Apr 06 '21 03:04 aqabawe