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.85k stars 329 forks source link

fix: PaginationItem onPress (both Pagination.Basic and Pagination.Custom) #677

Closed nmassey closed 2 months ago

nmassey commented 2 months ago

Overview of the bug

As per #676, v4.0.0-canary.13 accidentally introduced a bug that caused the click events on Pagination.Basic to no longer work.

This appears to have been accidentally introduced in #655

Thanks to @qwertychouskie for reporting here:

Why

From the TouchableWithoutFeedback docs:

Importantly, TouchableWithoutFeedback works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.

What: the fix

  1. in Pagination.Custom, standardize by importing TouchableWithoutFeedback from react-native (like we already do for Pagination.Basic)
  2. for both Pagination.Basic and Pagination.Custom, lower the <TouchableWithoutFeedback> wrapper to inside of PaginationItem so that it is immediately around the target <View> (or <Animated.View>) instead

Why

When using TouchableWithoutFeedback, it's important to keep <TouchableWithoutFeedback> immediately around the child <View> component.

Suggestion for reviewer

As a bulk of the changeset is just whitespace changes, I suggest reviewing this PR with whitespace hidden -

image
changeset-bot[bot] commented 2 months ago

🦋 Changeset detected

Latest commit: 00c948bca03ab1aeeaff97e5f077b1b4cd61e2e4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | -------------------------------- | ----- | | react-native-reanimated-carousel | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-native-reanimated-carousel ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 15, 2024 4:46am
nmassey commented 2 months ago

A potential alternative solution - Something like ...props on PaginationItem and forwarded to its child (e.g. <View {...props}> or <Animated.View {...props}>) might work (see StackOverflow here: https://stackoverflow.com/a/68952082 ). But this feels a little clunkier to me.