[android]: unable to click on a TouchableOpacity in React Native 0.70.5

[yepMad]

Hello,

I see all the drama about clicks through the hole on Android. Maybe I misunderstood, but it should work, right? There's a dirty solution behind it all but it should work, is it?

In react-native 0.70.5 the Scroll works, but the click on TouchableOpacity does not. Is this expected?

[stephenkopylov]

Hi @yepMad

Yes - this solution is dirty af but should work. But yep - we've never tested it on 0.70.5

If you'll prepare some reproducible example of non-working TouchableOpacity (via maybe "create-react-native-app") - we could check and fix it if it's possible

[yepMad]

Hey @stephenkopylov. I might try to do that soon, but I'll try to explain it quickly to get it documented.

My code is below. I'm using the RNHoleView inside a Context/Provider at the top of my app, "{children}" is the whole app stack (Navigators, Screens, etc). Clicking doesn't work anywhere in the app. But the scroll does.

PS: With or without pointerEvents="box-only" this doesnt work (I forgot to remove this from the print :P)

Sorry I can't provide an example right now, I hope I can do that soon. Thanks for the quick response!

[stephenkopylov]

Hep @yepMad I'd suggest you to try following:

put {children} block inside RNHoleView

Something like this:

<RNHoleView>
{children}
</RNHoleView>

This way it should work (but who knows - we never faced 0.70+ versions yet)

[sintylapse]

Hey @yepMad , did you find out how to fix the issue? This problem still persists

[juskk]

hi @stephenkopylov, could you please have a look on it, I guess the problem still exists. 0.71.0 rn version, iOS works fine, but on android touches doesnt work. im using 2.2.1 version of the lib.

[zabojad]

Try PR https://github.com/ibitcy/react-native-hole-view/pull/22 it should fix your touch issue...

[stephenkopylov]

Please try version 3.0.0-alpha3. It still needs some testing but should work.

[juskk]

it does thank you

[juskk]

hi @stephenkopylov, touches does work when I put RNHoleView directly inside a component, but when I try to place it above navigation so I can handle it in the whole app only scrolling works on android, iOS is still fine. could you please take a look at it

[stephenkopylov]

Hi @juskk!

Could you please prepare and upload to the github some kind of sample project illustrating this problem using for example create-react-native-app?

[juskk]

Hi @stephenkopylov

It's pretty simple so I'm not sure if I need to push it to git. Structure: App->Handler(here touches doesnt work)->Navigation->Page(here they do) React Native v. 0.71.0, empty project created with create-react-native-app.

Please tell me if I still need to push it to git.

[stephenkopylov]

Hi @juskk - the way you use react-native-hole view is a little bit incorrect

Please put your "Navigation" inside "RNHoleView"

Like this:

<RNHoleView>
   <Navigation/>
</RNHoleView>

Otherwise you'll not be able to click to your navigation stack

[juskk]

This way I have issues with RNHoleView background, its absent, while the transparent area is no more transparent. So is it the only solutions, it won't work the way I tried on android even tho it does on iOS?

Thanks in advance for your help

[stephenkopylov]

@juskk Sorry for misleading you're right - it should work without putting your content inside <RNHoleView>

Give me some time - I'll try to fix it

It' would be great if you prepare repro-project just to save my time :)

[sintylapse]

Doesn't seem to be working for Android even with 3.0.0-alpha3

[sintylapse]

Simple workaround is to capture press event and detecting if it's in the area of the hole, like that

<View onResponderRelease={({ nativeEvent: { pageX, pageY } }) => {
    const isWithinX = pageX > holeX && pageX < holeX + holeWidth;
    const isWithinY = pageY > holeY && pageY < holeY + holeHeight;

  const isPressedOnHole = isWithinX && isWithinY;

  if (isPressedOnHole) {
    onPressedInsideHole();
  }
}} >