Pointer-events does not work on GestureHandlerRootView on android

[Pnlvfx]

Description

Works on ios but doesn't work on android, I'm stuck here from more than a week, is it expected or I'm doing something wrong?

Steps to reproduce

Think like the spotify player:

<Tab.Navigator
  tabBar={babyPlayer}

To use the pan gesture handler I need to wrap the component with gestureHandlerRootHOC which I've recreated like so, as the original doesn't have the options to add pointer events:

import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import hoistNonReactStatics from 'hoist-non-react-statics';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

export default function gestureHandlerRootHOC<
  P extends Record<string, unknown>,
>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>) {
  function Wrapper(props: P) {
    return (
      <GestureHandlerRootView pointerEvents="box-none" style={containerStyles}>
        <Component {...props} />
      </GestureHandlerRootView>
    );
  }

  Wrapper.displayName = `gestureHandlerRootHOC(${
    Component.displayName || Component.name
  })`;

  hoistNonReactStatics(Wrapper, Component);

  return Wrapper;
}

and then I'm using it:

export const babyPlayer = gestureHandlerRootHOC(
  (props: BottomTabBarProps) => <BabyPlayer {...props} />,
  {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
    pointerEvents: 'none',
  },
);

Works fine on ios but doesn't work on android

Snack or a link to a repository

none

Gesture Handler version

2.12.0

React Native version

0.72.0-rc.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

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?

[j-piasecki]

Could you try adding a <View> between the GestureHandlerRootView and Component, and set pointer-events prop to that? Something like this:

<GestureHandlerRootView style={containerStyles}>
  <View pointerEvents="box-none" style={{flex: 1}}>
    <Component {...props} />
  </View>
</GestureHandlerRootView>```

[donatoaguirre24]

Hi, @Pnlvfx were you able to solve this?

We're facing a similar issue and the workaround proposed by @j-piasecki didn't work for us

Our app uses react-native-navigation and has a toast component that is presented as an overlay. We set interceptTouchOutside: false in the toast, but the GestureHandlerRootView is stealing the touch events (pointerEvents="box-none" works on iOS but not on Android)

Thanks!

[Pnlvfx]

Yes, I went inside the package and I copy the content of gesture handler root view into a new file add you can add the pointer events to it. Inviato da iPhone

On Aug 14, 2024, at 5:15 PM, Donato Aguirre @.***> wrote:



Hi, @Pnlvfxhttps://github.com/Pnlvfx were you able to solve this?

We're facing a similar issue and the workaround proposed by @j-piaseckihttps://github.com/j-piasecki didn't work for us

Our app uses react-native-navigation and has a toast component that is presented as an overlay. We set interceptTouchOutside: false in the toast, but the GestureHandlerRootView is stealing the touch events (pointerEvents="box-none" works on iOS but not on Android)

Thanks!

— Reply to this email directly, view it on GitHubhttps://github.com/software-mansion/react-native-gesture-handler/issues/2515#issuecomment-2289087076, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AWIQD3L7HYA5HQYXH4AE4WDZRNYBDAVCNFSM6AAAAABMQSDKCWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBZGA4DOMBXGY. You are receiving this because you were mentioned.Message ID: @.***>