[Feature Request] Ability to determine if a tap was on the left or right side of the card

[amirshukayev]

We want to be able to determine if a tap is on the left or right side of the card, a couple approaches can work here:

1. Separate onTapLeft and onTapRight handlers
2. Pass through normalized coordinates to onTap (0.0, 0.0 is top left, 1.0, 1.0 is bottom right)

Second approach feels better in my opinion because you use can handle different things like a deadzone in the middle, or tapping the bottom of the card to expand.

[amirshukayev]

I have written up the diff, but I'm unable to push my branch to open a pull request:

Author: Amir <[email protected]>
Date:   Sat May 27 09:35:37 2023 -0600

    [ADD] pass normalized coordinates of tap location to onTap handler

diff --git a/Swiper.js b/Swiper.js
index 418cbd4..9672397 100644
--- a/Swiper.js
+++ b/Swiper.js
@@ -277,7 +277,10 @@ class Swiper extends Component {
     }

     if (!this.state.slideGesture) {
-      this.props.onTapCard(this.state.firstCardIndex)
+      const normalizedX = gestureState.moveX / this.state.cardWidth;
+      const normalizedY = gestureState.moveY / this.state.cardHeight;
+
+      this.props.onTapCard(this.state.firstCardIndex, { normalizedX, normalizedY })
     }

     this.setState({
@@ -711,6 +714,13 @@ class Swiper extends Component {
       <View
         pointerEvents={pointerEvents}
         testID={testID}
+        onLayout={event => {
+          const layout = event.nativeEvent.layout
+          this.setState({
+            cardWidth: layout.width,
+            cardHeight: layout.height
+          })
+        }}
         style={[
           styles.container,
           {
@@ -901,6 +911,8 @@ Swiper.propTypes = {
   onSwiping: PropTypes.func,
   onTapCard: PropTypes.func,
   onTapCardDeadZone: PropTypes.number,
+  onTapCardLeft: PropTypes.func,
+  onTapCardRight: PropTypes.func,
   outputCardOpacityRangeX: PropTypes.array,
   outputCardOpacityRangeY: PropTypes.array,
   outputOverlayLabelsOpacityRangeX: PropTypes.array,
@@ -985,6 +997,8 @@ Swiper.defaultProps = {
   onSwiping: () => { },
   onTapCard: (cardIndex) => { },
   onTapCardDeadZone: 5,
+  onTapCardLeft: (cardIndex) => { },
+  onTapCardRight: (cardIndex) => { },
   outputCardOpacityRangeX: [0.8, 1, 1, 1, 0.8],
   outputCardOpacityRangeY: [0.8, 1, 1, 1, 0.8],
   outputOverlayLabelsOpacityRangeX: [1, 0, 0, 0, 1],
diff --git a/index.d.ts b/index.d.ts
index bd88f36..875e10c 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -39,7 +39,10 @@ declare module 'react-native-deck-swiper' {
     onSwipedRight?: (cardIndex: number) => void;
     onSwipedTop?: (cardIndex: number) => void;
     onSwiping?: (x: number, y: number) => void;
-    onTapCard?: (cardIndex: number) => void;
+    onTapCard?: (
+      cardIndex: number,
+      tapCoordinates: { normalizedX: number, normalizedY: number }
+    ) => void;
     onTapCardDeadZone?: number;
     outputCardOpacityRangeX?: [number, number, number, number, number];
     outputCardOpacityRangeY?: [number, number, number, number, number];