Is using react-native-gesture-handler in a bare React Native project unsupported?

[pasiorovuo]

The documentation states If you are starting a new project, initialize it with npx create-expo-app@latest since it comes pre-installed with react-native-gesture-handler here.

I have a bare RN project, in which I've tried to integrate RNGH (as a dependency for few libraries). The app always fails (when running with npx react-native run-android with a variation (depending on what's imported) of below:

error: Error: Unable to resolve module react-native-gesture-handler from C:\project-folder\App.tsx: react-native-gesture-handler could not be found within the project or in these directories:
  node_modules
> 1 | import 'react-native-gesture-handler';
    |         ^
  2 | import 'react-native-reanimated';
  3 |
  4 | import type {PropsWithChildren} from 'react';
    at ModuleResolver.resolveDependency (C:\project-folder\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (C:\project-folder\node_modules\metro\src\node-haste\DependencyGraph.js:232:43)
    at C:\project-folder\node_modules\metro\src\lib\transformHelpers.js:156:21
    at resolveDependencies (C:\project-folder\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)
    at visit (C:\project-folder\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async buildSubgraph (C:\project-folder\node_modules\metro\src\DeltaBundler\buildSubgraph.js:103:3)
    at async Graph._buildDelta (C:\project-folder\node_modules\metro\src\DeltaBundler\Graph.js:157:22)
    at async Graph.traverseDependencies (C:\project-folder\node_modules\metro\src\DeltaBundler\Graph.js:49:19)

Dependencies from package.json are:

{
  ...
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "date-fns": "^4.1.0",
    "iso8601-duration": "^2.1.2",
    "react": "18.3.1",
    "react-native": "0.75.4",
    "react-native-app-auth": "^8.0.0",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-reanimated": "^3.16.1",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-safe-area-context": "^4.11.1",
    "react-native-screens": "^3.34.0",
    "react-native-size-matters": "^0.4.2",
    "react-native-svg": "^15.8.0",
    "styled-components": "^6.1.13"
  },
  ...

I've followed the instructions in the documentation and additionally tried including RNGH manually in MainApplication.kt getPackages() but none of this seems to make a difference. Googling around also does not seem to give answers.

So, as the title states, is not using Expo unsupported?

[m-bert]

It definitely is supported. Could you share result of either npm list react-native-gesture-handler or yarn why react-native-gesture-handler, depending on your package manager?

[pasiorovuo]

Thanks for getting back. The output is

npm list react-native-gesture-handler
[email protected] ...
├─┬ @react-navigation/[email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

[m-bert]

Looking at your error message, have you checked if Gesture Handler is present inside node_modules directory? If not, try resetting npm cache (npm cache clean), remove node_modules, package-lock.json and then run npm install once more.

[pasiorovuo]

Thanks for the tip! Sure enough, RNGH was present in node_modules/, but I still decided proceed with removing the folder reinstalling everything. The error changed and was about potential duplicates in getPackages(). After removing all getPackages() changes, there's now just a white screen. I'll continue troubleshooting. Thanks again!