dohooo/react-native-reanimated-carousel

Horizontal Carousel suppresses vertical scroll gesture handler

yepMad opened this issue · 7 comments

yepMad commented

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):

  • react: v17.0.1
  • react-native: v0.64.3
  • react-native-reanimated: v2.3.1
  • react-native-reanimated-carousel: v2.3.1
  • react-native-gesture-handler: v2.1.0

Smartphone (please complete the following information):

  • Device: LG K8+
  • OS: Android 9
  • Browser (?)
  • Version (?)

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

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

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.

#125 , If this solves your problem, can you help update the README with your problem attached? 🎉 😄

  • ❤️2
dohooo commented

@yepMad For faster communication, check it out here

dohooo commented

@yepMad Hi~ Is there any progress?

yepMad commented

@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 :)

  • 👍2
  • 🎉2
ningacoding commented

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",
falk-stefan commented

Got the same problem. Any solution for this?