React-native-gesture-handler: fails with react-native-windows, cannot read property Direction of undefined

[teclone]

Hello, Excellent work by the team.

Please forgive me if my issue is not clear enough or does not follow the standard. I will provide further information if need be. Thanks in advance.

Here is my problem, I am running into this error message while trying out react-native-windows on a project.

I followed the instructions on the react navigation webiste to get this installed on a bare react native project. All works well for android, but whenever I run npx react-native run-windows on windows, I get the following error message:

TypeError: Cannot read property 'Direction' of undefined

Project dependencies

"react": "16.11.0",
  "react-native": "0.62.0-0",
    "react-native-gesture-handler": "1.6.1",
    "react-native-reanimated": "1.9.0",
    "react-native-rss-parser": "1.4.0",
    "react-native-safe-area-context": "3.0.2",
    "react-native-screens": "2.8.0",
    "react-native-sqlite-2": "3.0.1",
    "react-native-webview": "10.2.3",
    "react-native-windows": "0.62.0-0"

[exotexot]

Having the same isssue. Its problematic as this package is part of react-navigation. :(

[adrien-prototype]

Yes, same here :(

React-navigation says :

To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';

But this import brings "Direction of undefined" error every time. Didn't figure out why yet.

[willerpp]

I had the same problem, any solution at all?

[josesanchis16]

same problem here

[BrayanIribe]

Can confirm, same problem here.

[mnhthng-thms]

This issue is related to #494 and #1021. You should refer to them.

[BrayanIribe]

This issue is related to #494 and #1021. You should refer to them.

fails with react-native-windows.

[mnhthng-thms]

@BrayanIribe both issues occurred because the packages we add into our project try to import from NativeModules.Direction of react-native, which doesn't exist.

[safadl]

Same issue!!!

[mnhthng-thms]

The official documentation at this link states that we have to use bare or managed workflow provided by expo-cli to install modules that react-native-gesture-handler needs. Personally I've not had enough experience with native code, so I have to stick with Expo for a while!

[Hawiie13]

try this use the web stubs
https://github.com/software-mansion/react-native-gesture-handler/issues/382#issuecomment-495018322
I have working navigation stack

Output:

[khanzzirfan]

The above recommendation works.. but still there are few more things to fix. Here is my setup all together.

"dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "5.5.1",
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",   
    "prop-types": "^15.7.2",
    "react": "16.11.0",
    "react-native": "^0.62.0-0",
    "react-native-gesture-handler": "1.3.0",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.11.0",
    "react-native-vector-icons": "^7.1.0",
    "react-native-windows": "^0.62.0-0",
    "react-navigation": "3.5.1"
  },

• update all four files mentioned above @Hawiie13
• Also updated react-native-safe-area-view -> index.web.js to index.windows.js.
• Also remove lines for ToolbarAndroid from react-native-gesture-handler -> GestureComponents.windows.js

[mrKorg]

I have the same issue with react-native.
import "react-native-gesture-handler" create error "Cannot read property Direction of undefined"

I have the same issue without this import, just use @react-navigation

{ "name": "reactNativeClear", "version": "0.0.1", "private": true, "scripts": { "start-web": "react-scripts start", "start-mobile": "react-native start --reset-cache", "start-ios": "react-native run-ios", "start-android": "react-native run-android", "eslint-fix": "eslint --fix --ext .js,.jsx .", "build-web": "react-scripts build" }, "dependencies": { "@react-native-community/masked-view": "^0.1.10", "@react-navigation/bottom-tabs": "^5.9.1", "@react-navigation/native": "^5.7.5", "@react-navigation/stack": "^5.9.2", "babel-plugin-module-resolver": "^4.0.0", "eslint-config-react-app": "^5.2.1", "eslint-plugin-import": "^2.22.1", "react": "16.13.1", "react-dom": "^16.13.1", "react-native": "0.63.2", "react-native-gesture-handler": "^1.8.0", "react-native-safe-area-context": "^3.1.8", "react-native-screens": "^2.11.0", "react-native-web": "^0.13.14", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3" }, "devDependencies": { "@babel/core": "^7.11.6", "@babel/runtime": "^7.11.2", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.3.0", "eslint": "^7.10.0", "eslint-config-airbnb": "^18.1.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.4", "jest": "^26.4.2", "metro-react-native-babel-preset": "^0.63.0", "prettier": "^2.0.5", "react-test-renderer": "16.13.1" }, "jest": { "preset": "react-native" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

[capc0]

Someone has a working setup with latest version? package changed to @react-navigation/native

[creambyemute]

@capc0 Yeah I just got it working. Follow the above comments of @Hawiie13 and @khanzzirfan .

You can create yourself a script at project root, mine is called webToWindowsRNGH.js:

const fs = require("fs");

function callback(err) {
    if (err) {
        throw err;
    }
    console.log("Successfull!");
}

[
    "./node_modules/react-native-gesture-handler/GestureHandlerButton.web.js",
    "./node_modules/react-native-gesture-handler/PlatformConstants.web.js",
    "./node_modules/react-native-gesture-handler/RNGestureHandlerModule.web.js"
].forEach((inputPath) => {
    const splits = inputPath.split("./node_modules/react-native-gesture-handler/");
    const newFileName = splits[1].replace(".web.js", ".windows.js");
    const outputPath = "./node_modules/react-native-gesture-handler/" + newFileName;

    console.log(`Trying to copy ${inputPath} to ${outputPath}`);
    fs.copyFile(inputPath, outputPath, callback);
});

After that, adapt the package.json and add the postinstall script:
"postinstall": "node ./webToWindowsRNGH"

If you need to edit the files content, patch-package is probably the better way.

[stmoy]

CC: @JonThysell @chrisglein

[davidwico]

same issue with react-native