react native gesture handler htmlelement is not defined error

[GSFdev24]

Description

Hi all,

I installed react native with the react native for windows workflow and wanted to implement a drawer navigator. following the instructions from here: https://reactnavigation.org/docs/drawer-navigator

After this my App.jsx looks like this:

import 'react-native-gesture-handler';
import * as React from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import HomeScreen from './src/pages/Home.tsx';
import ProfileScreen from './src/pages/ProfileScreen.tsx';

const Drawer = createDrawerNavigator();

const MyStack = () => {
  return (

      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Profile" component={ProfileScreen} />
        </Drawer.Navigator>
      </NavigationContainer>

  );
};
export default MyStack;

Steps to reproduce

I run the mobile app with:

npx react-native run-windows

The debugger throws then the error:

'PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/...'

So I also followed the instructions in there and installed the GestureHandlerRootView as a root element above the NavigationContainer.

Now I get the error 'HTMLElement is not defined' in the installed package react-native-gesture-handler. Specifically in the file react-native-gesture-handler\src\RNGestureHandlerModule.windows.ts

attachGestureHandler(
    handlerTag: number,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    newView: any,
    _actionType: ActionType,
    propsRef: React.RefObject<unknown>
  ) {
    if (
 -->     !(newView instanceof HTMLElement || newView instanceof React.Component)
    ) {
      return;
    }

    if (isNewWebImplementationEnabled()) {
      //@ts-ignore Types should be HTMLElement or React.Component
      NodeManager.getHandler(handlerTag).init(newView, propsRef);
    } else {
      //@ts-ignore Types should be HTMLElement or React.Component
      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
    }
  },
  updateGestureHandler(handlerTag: number, newConfig: Config) {
    if (isNewWebImplementationEnabled()) {
      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);

      InteractionManager.getInstance().configureInteractions(
        NodeManager.getHandler(handlerTag),
        newConfig
      );
    } else {
      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
    }
  }

I researched possible solutions for the error, but did not find anything.Please help.

N.B. my platform target is windows but there aren't in the pick

Snack or a link to a repository

https://stackoverflow.com/questions/77890799/react-native-gesture-handler-htmlelement-is-not-defined-error

Gesture Handler version

2.14.1

React Native version

0.73.3

Platforms

Windows

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[m-bert]

Hi @tanodev85! I've just created PR that should fix this issue (though I'm not sure if this is the only problem). Could you please check that?

[GSFdev24]

hi @m-bert thanks for the answer and support, i check your PR , now show the navigation drawer but it doesn't work, when i click on hamburger menù the app crash

[m-bert]

Do you have more information about this crash? We don't use Windows machines and at this moment it is not actively supported platform, though I can try to look at it if you provide more details (especially reproduction).

Edit:

I could have phrased it better - currently gesture handler doesn't work on Windows. By adding module file we wanted to ensure that apps will build correctly and won't crash. Given that drawer uses Pan under the hood, unfortunately it won't work on your platform.

[GSFdev24]

Hi @m-bert I can ask you if you know if I can use the navigationDrawer on windows without GestureHandlerRootView.
I will then try to provide you with more information on 18 crashes. Thank you

[m-bert]

No, unfortunately you won't be able to use it on Windows. Drawer implementation uses PanGestureHandler and since we do not support Windows at the moment it simply won't work.

[exotexot]

@GSFdev24 @m-bert

Thats not true, I'm running a drawer navigation on react-native-windows for some time now.

It works for me with:

"react": "^18.2.0",
"react-native": "^0.72.4",
"react-native-windows": "0.72.28",
"react-native-gesture-handler": "2.14.1", << important
"react-native-reanimated": "3.5.4", <<<< important
"@react-navigation/drawer": "^6.6.3",
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",

Use this patch-package to fix node_modules/react-native-gesture-handler/src/RNGestureHandlerModule.windows.ts

diff --git a/node_modules/react-native-gesture-handler/src/RNGestureHandlerModule.windows.ts b/node_modules/react-native-gesture-handler/src/RNGestureHandlerModule.windows.ts
index 1be3911..53da30f 100644
--- a/node_modules/react-native-gesture-handler/src/RNGestureHandlerModule.windows.ts
+++ b/node_modules/react-native-gesture-handler/src/RNGestureHandlerModule.windows.ts
@@ -96,7 +96,7 @@ export default {
     propsRef: React.RefObject<unknown>
   ) {
     if (
-      !(newView instanceof HTMLElement || newView instanceof React.Component)
+      !(newView instanceof React.Component)
     ) {
       return;
     }

[m-bert]

Thanks for this information @exotexot! Maybe react-navigation uses something else on Windows, I'm not sure. Is it still working after merging this PR?