question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add panGestureHandler props to Carousel

See original GitHub issue

Awesome stuff! Would it be possible to add panGestureHandler props to the Carousel?

e.g.

 <PanGestureHandler
            onHandlerStateChange={animatedListScrollHandler}
            {...panHandlerProps}
       ....

I can make PR if you give access 👍

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
klandellcommented, Oct 21, 2021

@tristanfrantz Just wondering what props you used in panGestureHandlerProps. I have multiple carousels in a vertical ScrollView and that causes the swipe of the carousel to not work. I’m hoping changing those settings will fix it, but haven’t had luck yet.

Edit: Nevermind, figured it out. For anyone else searching for answers, I needed to use ScrollView from ‘react-native-gesture-handler’ instead of from ‘react-native’, and used the following gesture handler props in the Carousel.

panGestureHandlerProps={{
  activeOffsetX: [-10, 10],
  failOffsetY: [-10, 10],
}}
1reaction
dohooocommented, Oct 19, 2021

There is no problem with the submitted code,except I think the props type should be

handlerProps?: Omit<PanGestureHandlerProps,’onHandlerStateChange’>;

onHandlerStateChange Is key method 😄,

btw,why you can’t send pull request? I used another account to send a pull request, it worked.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React passing props into custom carousel - Stack Overflow
What you should do instead, is allow yourself the flexibility to pass in any number of items to your Carousel component via props....
Read more >
react-native-reanimated-carousel - npm
Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.. Latest version: 3.0.6, last published: 8 ...
Read more >
Reanimated Carousel For React Native - ReactScript
A simple, infinitely scrolling React Native carousel using Reanimated 2. How to use it: 1. Install the package. # Yarn $ yarn add...
Read more >
Problem with slider inside BottomSheet on Android #145
In my example I'm using reanimated-bottom-sheet with react-native-snap-carousel inside ScrollView. I had to add state which we will be using ...
Read more >
PanGestureHandler | React Native Gesture Handler
Note that on both Android and iOS when the additional finger is placed on the screen that translation prop is not affected even...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found