[REGRESSION] The `onClick` function of `<Pagination.Basic>` doesn't work

[qwertychouskie]

https://github.com/dohooo/react-native-reanimated-carousel/commit/f41173cc5d374a94e9757214fe98270ad2661259 introduced a regression where the onClick doesn't fire when clicking the dots of the <Pagination.Basic> component.

As per https://github.com/facebook/react-native/issues/10180#issuecomment-298375648, the issue is that React Native's built-in <TouchableWithoutFeedback> needs the child to be a <View>, not a custom component. Either revert the offending commit, or wrap the <PaginationItem> in a <View>.

Oddly enough, <Pagination.Custom> still imports <TouchableWithoutFeedback> from react-native-gesture-handler, and therefore using <Pagination.Custom> is a viable workaround for now.

[dosubot[bot]]

I found a similar closed issue that might be relevant to your problem. The issue titled "Hi" was last updated on July 06, 2022. This issue was referenced by:

• Carousel items not moving (last updated on March 21, 2024)
• 【Android only】autoPlay does not work when scrolling up or down in a scroll view (last updated on May 10, 2024)
• onScrollBegin is firing when scrolling down inside a ScrollView and then onScrollEnd does not fire (last updated on September 14, 2024)

Regarding the regression introduced in commit f41173cc5d374a94e9757214fe98270ad2661259, it appears that the onClick function of <Pagination.Basic> is not working because React Native's <TouchableWithoutFeedback> requires its child to be a <View>, not a custom component.

To resolve this issue, you have a couple of options:

1. Revert the Commit: Reverting the commit that introduced the regression.
2. Wrap <PaginationItem> in a <View>: Modify the code to wrap the <PaginationItem> in a <View>.

As a temporary workaround, you can use <Pagination.Custom>, which imports <TouchableWithoutFeedback> from react-native-gesture-handler and still functions correctly.

Here is an example of how you might wrap the <PaginationItem> in a <View>:

<TouchableWithoutFeedback
  key={index}
  onPress={() => onPress?.(index)}
>
  <View>
    <PaginationItem
      index={index}
      size={size}
      count={data.length}
      dotStyle={dotStyle}
      animValue={progress}
      horizontal={!horizontal}
      activeDotStyle={activeDotStyle}
    >
      {renderItem?.(item, index)}
    </PaginationItem>
  </View>
</TouchableWithoutFeedback>

This should ensure that the onClick event fires correctly.

To continue talking to Dosu, mention @dosu.

[nmassey]

As per Discord (here), @qwertychouskie - are you able to review the proposed fix here?

• 677