I installed react native with the react native for windows workflow and wanted to implement a drawer navigatior. 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 React from 'react'; import { Button, Text, View, } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; const Drawer = createDrawerNavigator(); const Stack = createNativeStackNavigator(); function DetailsScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text style={{ color: 'red' }}>Details Screen</Text> <Button style={{ color: 'red' }} title="Go to Details... again" onPress={() => navigation.push('Details')} /> <Button title="Go to Home" onPress={() => navigation.navigate('Home')} /> <Button title="Go back" onPress={() => navigation.goBack()} /> </View> ); } function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text style={{ color: 'red' }}>Home Screen</Text> <Button style={{ color: 'red' }} title="Go to Details" onPress={() => navigation.navigate('Details')} /> </View> ); } function App() { return ( <NavigationContainer> <Drawer.Navigator initialRouteName="Home"> <Drawer.Screen name="Home" component={HomeScreen} /> <Drawer.Screen name="Details" component={DetailsScreen} /> </Drawer.Navigator> </NavigationContainer> ); } export default App; 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 regarding this package and module. Did not find anything.Please help.
