search

dohooo / react-native-reanimated-carousel

🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
https://react-native-reanimated-carousel.vercel.app
MIT License
2.83k stars 328 forks source link

Horizontal Carousel suppresses vertical scroll gesture handler #143

Closed yepMad closed 2 years ago

yepMad commented 2 years ago

Describe the bug I'm using a horizontal Carousel inside a FlatList inside ListHeaderComponent. It is not possible to scroll the FlatList vertically when trying to swipe over the horizontal Carousel. Most likely this also happens in a ScrollView.

To Reproduce Steps to reproduce the behavior:

  1. Add a FlatList
  2. Add Carousel into ListHeaderComponent
  3. Try to scroll with gesture on Carousel

Expected behavior The page scrolls vertically normally.

Screenshots Sorry, project under NDA

Versions (please complete the following information):

Smartphone (please complete the following information):

Additional context

<Carousel
      width={screenWidth}
      windowSize={5}
      height={180}
      data={[1, 2, 3]}
      loop={false}
      mode="parallax"
      modeConfig={{
        parallaxScrollingOffset: 50,
        parallaxScrollingScale: 0.82,
        parallaxAdjacentItemScale: 0.82,
      }}
      renderItem={() => <TopicCard progressValue={0} progressGoalValue={1} />}
    />

<FlatList
        data={data}
        renderItem={renderItem}
        contentContainerStyle={{ paddingTop: 28 }}
        keyExtractor={keyExtractor}
        ListHeaderComponent={header} // <- Carousel is here!
      />
yepMad commented 2 years ago

I would be happy to see that, but at the moment I can't take care of it. @dohooo if you think this is something difficult please let me know.

dohooo commented 2 years ago

I would be happy to see that, but at the moment I can't take care of it. @dohooo if you think this is something difficult please let me know.

https://github.com/dohooo/react-native-reanimated-carousel/issues/125 , If this solves your problem, can you help update the README with your problem attached? 🎉 😄

dohooo commented 2 years ago

@yepMad For faster communication, check it out here

dohooo commented 2 years ago

@yepMad Hi~ Is there any progress?

yepMad commented 2 years ago

@yepMad Hi~ Is there any progress?

Sorry for the delay, I wasn't home this weekend! The solution of #125 fitted like a glove. I will add to the README :)

ningacoding commented 2 months ago

Hello, the solution #125 does not work for my case.

"react-native-reanimated-carousel": "3.5.1",
"react-native": "0.74.5",
"react": "18.2.0",
"react-native-gesture-handler": "~2.16.1",