Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal Carousel suppresses vertical scroll gesture handler #143

Closed
yepMad opened this issue Mar 4, 2022 · 5 comments
Closed

Horizontal Carousel suppresses vertical scroll gesture handler #143

yepMad opened this issue Mar 4, 2022 · 5 comments
Assignees
Labels
bug Something isn't working

Comments

@yepMad
Copy link
Contributor

yepMad commented Mar 4, 2022

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 yepMad added the bug Something isn't working label Mar 4, 2022
@yepMad
Copy link
Contributor Author

yepMad commented Mar 4, 2022

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
Copy link
Owner

dohooo commented Mar 4, 2022

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? 🎉 😄

@dohooo
Copy link
Owner

dohooo commented Mar 4, 2022

@yepMad For faster communication, check it out here

@dohooo
Copy link
Owner

dohooo commented Mar 6, 2022

@yepMad Hi~ Is there any progress?

@yepMad
Copy link
Contributor Author

yepMad commented Mar 7, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants