Swipe gesture registered as tap when using in a React Navigation screen

[ChenLiangZhen]

This issue is quite similar to ticket #150

I've double checked and firmly believe there're some problem with the package.

System: MacOS, Macbook M2

This is my package.json

  "name": "arti-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@lightiichen/react-native-layouts": "^0.1.0",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-navigation/bottom-tabs": "^6.5.2",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.7",
    "@types/react-native-snap-carousel": "^3.8.5",
    "@types/react-navigation": "^3.4.0",
    "expo": "~47.0.12",
    "expo-asset": "~8.7.0",
    "expo-av": "~13.0.2",
    "expo-constants": "~14.0.2",
    "expo-file-system": "~15.1.1",
    "expo-font": "~11.0.1",
    "expo-linking": "~3.3.0",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-system-ui": "~2.0.1",
    "expo-updates": "~0.15.6",
    "expo-web-browser": "~12.0.0",
    "jotai": "^1.12.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-card-flip": "^1.0.7",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "~2.12.0",
    "react-native-reanimated-carousel": "^3.3.0",
    "react-native-screens": "~3.18.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-web": "~0.18.9",
    "zustand": "^4.3.3",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-safe-area-context": "^4.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.24",
    "@types/react-native": "~0.70.6",
    "jest": "^26.6.3",
    "jest-expo": "~47.0.1",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.6.3"
  },

I have a carousel component with two renderItem, each item is a Pressable component. the problem is, when I swipe the carousel, it automatically registered as tap and triggered onPress function inside Pressable.

Something strange

1. the issue only happens on iOS

2. When using in newly created project (without React Navigation), everything works fine. Swipe gesture works absolutely normal. But if using in newly created project with React Navigation ( the Carousel component is inside a React Navigation screen ), when swiping the carousel doesn't work normally instead it treat my swipe gesture as a tap gesture and triggered onPress function in my Pressable item.

I've wrapped the base view component with GestureHandlerRootView component.

Anyone has idea?

[djguruwap]

Getting porfomance issue while switching between react-navigation-button-tabs.

Might be helpful solution - shouldComponentUpdate()

[ChenLiangZhen]

Temporary solution:

In ticket #150 someone suggested using TouchableOpacity from react-native-gesture-handler but that doesn't work for me (I find it barely usable and I don't want the opacity effect)

My temporary workaround is by using BaseButton component from react-native-gesture-handler, it is somewhat similar to pressable and can be styled like any other react native components

I suspect that the gesture handler system in React Navigation is conflicting with Carousel's. But in my understanding React Navigation itself uses RNGH to handle gestures. So I don't know what actually happened here.

[RadwaHamdy1010]

I also solved this issue by using TapGestureHandler component for the pressable component from 'react-native-gesture-handler' instead of using TouchableOpacity

[Vahan-Asryan]

Using TouchableWithoutFeedback from react-native-gesture-handler solved a similar issue for me.

[senghuotlay]

@Vahan-Asryan the issue with touchableWithoutFeedback, is that you're unable to wrap a pressable that's inside it

[Vahan-Asryan]

@Vahan-Asryan the issue with touchableWithoutFeedback, is that you're unable to wrap a pressable that's inside it

When a Pressable from react-native is used inside carousel, it triggers press event when carousel is swapped. This issue is fixed when TouchableWithoutFeedback from react-native-gesture-handler is used instead.