From 5b30e17024987eaee7a9ed983f1d9dd7989299ce Mon Sep 17 00:00:00 2001
From: Nate Massey <ngithub@natemassey.com>
Date: Sat, 14 Sep 2024 21:10:30 -0700
Subject: [PATCH] fix: custom: lower TouchableWithoutFeedback to PaginationItem
 instead, re: #676

---
 src/components/Pagination/Custom/PaginationItem.tsx |  9 +++++++--
 src/components/Pagination/Custom/index.tsx          | 13 +++++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Pagination/Custom/PaginationItem.tsx b/src/components/Pagination/Custom/PaginationItem.tsx
index 8b25964d..31fac5d0 100644
--- a/src/components/Pagination/Custom/PaginationItem.tsx
+++ b/src/components/Pagination/Custom/PaginationItem.tsx
@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from "react";
 import React from "react";
+import { TouchableWithoutFeedback } from "react-native";
 import type { ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import Animated, {
@@ -33,6 +34,7 @@ export const PaginationItem: React.FC<
     horizontal?: boolean;
     dotStyle?: DotStyle;
     activeDotStyle?: DotStyle;
+    onPress: () => void;
     customReanimatedStyle?: (
       progress: number,
       index: number,
@@ -51,6 +53,7 @@ export const PaginationItem: React.FC<
     horizontal,
     children,
     customReanimatedStyle,
+    onPress,
   } = props;
   const customReanimatedStyleRef = useSharedValue<DefaultStyle>({});
   const handleCustomAnimation = (progress: number) => {
@@ -130,6 +133,7 @@ export const PaginationItem: React.FC<
   ]);
 
   return (
+    <TouchableWithoutFeedback onPress={onPress}>
     <Animated.View
       style={[
         {
@@ -144,7 +148,8 @@ export const PaginationItem: React.FC<
         animStyle,
       ]}
     >
-      {children}
-    </Animated.View>
+        {children}
+      </Animated.View>
+    </TouchableWithoutFeedback>
   );
 };
diff --git a/src/components/Pagination/Custom/index.tsx b/src/components/Pagination/Custom/index.tsx
index 7d2604e3..526dee54 100644
--- a/src/components/Pagination/Custom/index.tsx
+++ b/src/components/Pagination/Custom/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-import { TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 
 import type { DefaultStyle } from "react-native-reanimated/lib/typescript/reanimated2/hook/commonTypes";
@@ -80,12 +80,9 @@ export const Custom = <T extends {}>(props: ShapeProps<T>) => {
     >
       {data.map((item, index) => {
         return (
-          <TouchableWithoutFeedback
-            key={index}
-            onPress={() => onPress?.(index)}
-          >
             <PaginationItem
-              index={index}
+            key={index}
+            index={index}
               size={size}
               count={data.length}
               dotStyle={dotStyle}
@@ -93,10 +90,10 @@ export const Custom = <T extends {}>(props: ShapeProps<T>) => {
               horizontal={!horizontal}
               activeDotStyle={activeDotStyle}
               customReanimatedStyle={customReanimatedStyle}
-            >
+              onPress={() => onPress?.(index)}
+              >
               {renderItem?.(item, index)}
             </PaginationItem>
-          </TouchableWithoutFeedback>
         );
       })}
     </View>