31

I've installed GestureHandler (npx expo install react-native-gesture-handler) and also imported it into my App.tsx file on line 3 with polyfills

import 'react-native-gesture-handler';

was doing it by the Expo Docs and for some reason it still doesn't seem to be working even after running npx expo start --clear (to clear cache) it will gives me this error:

Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView.
Otherwise the gestures will not be recognized.
See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.
Improve this question

5 Answers 5

Reset to default
90

Okay so turned out I am dumb and I imported TouchableOpacity from react-native-gesture-handler instead of react-native 😅 sorry but maybe might help someone so just posting the solution here :) happy coding

Improve this answer
4
  • I did the same with TouchableWithoutFeedback. Importing it from react-native-gesture-handler was causing the issue 😂
    – Abhilash
    Commented Nov 28, 2023 at 17:39
  • 3
    I totally did the same and you saved me. Thanks for not just commenting "nevermind, it is solved"
    – Vahid
    Commented Mar 10 at 22:12
  • Omg me too for using the RefreshControl, VSCode decided to automatically import it from react-native-gestures-handler and I was like why it's not working haha +1
    – Julien Pepe
    Commented May 11 at 14:16
  • i felt smarter now after i resolved this
    – SKLTFZ
    Commented Jun 24 at 4:16
20

It looks like this was a recent change by the team behind react-native-gesture-handler. A GitHub issue was opened recently and has been resolved by this comment: https://github.com/gorhom/react-native-bottom-sheet/issues/1373#issuecomment-1550661599

"I fixed this by adding GestureHandlerRootView wrapper at the root of my project (E.g App.tsx). You can find the instruction here https://docs.swmansion.com/react-native-gesture-handler/docs/installation/#js"

So your code will looks something like this:

<GestureHandlerRootView>
// your code
</GestureHandlerRootView>
Improve this answer
3
  • yes yes you can have also this solution but overall it's easier to just watch the intellisense more carefuly when clicking on auto-import :D
    – insider
    Commented Oct 23, 2023 at 8:53
  • 1
    TouchableOpacity can be imported from either react-native-gesture-handler or react-native, however they have slightly different behaviors. This SO answer describes the difference well: stackoverflow.com/a/64742309/16913644, an oversimplification would be that RNGH's touchables are typically better for native development, whereas RN's are better for web
    – Jeffrey Kozik
    Commented Oct 24, 2023 at 15:37
  • 6
    I needed to define as <GestureHandlerRootView style={{ flex: 1 }}>, otherwise my screen went blank.
    – Lucas Basquerotto
    Commented Nov 8, 2023 at 21:42
8

just need to import "ScrollView" from "react-native" instead of "react-native-gesture-handler"

Improve this answer
0
2

you might have imported TouchableOpacity or RefreshControl from react-native-gesture-handler, import it from react-native

Improve this answer
-1

I have also faced this issue and fixed it by downgrading react-native-gesture-handler to 2.9.0

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.