Ignoring gesture because view data was not found

[ivandortulov]

Description

What can be causing this issue?

Everything seemed to be working until I installed @react-navigation/stack and placed the Draggable view insiede a Stack Navigator.

If I move it outside of the Stack Navigator, everything works. I believe the Stack Navigator has some gesture detectors and it conflicts with Drax.

This is the logs I am getting with debug:

LOG  handleGestureStateChange(0y4h5zoxbtqxcex8g0mgyo, {
  "absoluteY": 132.3813934326172,
  "y": 19.65411949157715,
  "absoluteX": 569.4353637695312,
  "x": 80.3444595336914,
  "duration": 0,
  "handlerTag": 55,
  "state": 2,
  "oldState": 0,
  "numberOfPointers": 1
})
 LOG  Ignoring gesture for view id 0y4h5zoxbtqxcex8g0mgyo because view data was not found
 LOG  handleGestureStateChange(0y4h5zoxbtqxcex8g0mgyo, {
  "absoluteY": 132.3813934326172,
  "y": 19.65411949157715,
  "absoluteX": 569.4353637695312,
  "x": 80.3444595336914,
  "duration": 1,
  "handlerTag": 55,
  "state": 4,
  "oldState": 2,
  "numberOfPointers": 1
})

Versions

react-native: 0.72.7 react-native-gesture-handler: 1.8.0 react-navigation/bottom-tabs: 6.5.11 react-navigation/native: 6.1.9 react-navigation/native-stack: 6.9.17 react-navigation/stack: 6.3.20

[LunatiqueCoder]

Hello @ivandortulov

We're also using <StackNavigator /> and everything seems to be working well. Are you using the <DraxProvider /> inside the stack screen? Can you provide a reproducible repository?

[ivandortulov]

Ah ... that was the issue. I was not using a DraxProvider inside the stack. I had it placed inside the navigation container only:

<GestureHandlerRootView style={{flex: 1}}>
  <NavigationContainer theme={AppTheme}>
    <DraxProvider>
      <CourtProvider>
        <SideNavigation />   // <--- This contains a Side Bar Navigator + Stack Navigator
      </CourtProvider>
    </DraxProvider>
  </NavigationContainer>
</GestureHandlerRootView>

[LunatiqueCoder]

@ivandortulov So does this fix your issue? Do you need for any reason to wrap your screens with a <DraxProvider />?

[ivandortulov]

Adding DixaProvider as the root of my screens does solve the issue. If I do not make it the root view of my screens but instead have it as a root view for the navigators is when it does not work, i.e.:

NOT Working:

<GestureHandlerRootView style={{flex: 1}}>
  <NavigationContainer>
    <DraxProvider>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={() => 
          <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Notifications" component={Notifications} />
          </Stack.Navigator>
        } />
      </Tab.Navigator>
    </DraxProvider>
  </NavigationContainer>
</GestureHandlerRootView>

Working:

<GestureHandlerRootView style={{flex: 1}}>
  <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={() => 
          <Stack.Navigator>
            <Stack.Screen name="Home" component={() => <DraxProvider><Home /></DraxProvider>} />
            <Stack.Screen name="Notifications" component={() => <DraxProvider><Notifications /></DraxProvider>} />
          </Stack.Navigator>
        } />
      </Tab.Navigator>
  </NavigationContainer>
</GestureHandlerRootView>