fix: custom: lower TouchableWithoutFeedback to PaginationItem instead…

…, re: #676
dohooo · Oct 4, 2024 · 5b30e17 · 5b30e17
1 parent 1d22ee1
commit 5b30e17
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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,23 +80,20 @@ 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}
               animValue={progress}
               horizontal={!horizontal}
               activeDotStyle={activeDotStyle}
               customReanimatedStyle={customReanimatedStyle}
-            >
+              onPress={() => onPress?.(index)}
+              >
               {renderItem?.(item, index)}
             </PaginationItem>
-          </TouchableWithoutFeedback>
         );
       })}
     </View>