[Android] Banner overlays do not allow touches under the overlay if using a NativeProp

[mikewli]

🐛 Bug Report

Banner overlays do not allow touches to pass through the overlay and activate UI underneath the overlay if using a NativeProp, such as testID.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

Here is an example reproduction demo using react-native-navigation: https://github.com/mikewli/react-native-navigation

After running npm install, npm start, and npm run android, you will start the app in an Android emulator / device. This behavior was tested on an Android emulator, Pixel 3a, API 32 on Debug.

1. Tap Show banner overlay button
2. Try to tap Log layout message button
3. Observe that you cannot tap any button underneath the overlay thereafter

You can also reproduce the issue in the React Native Navigation playground app by editing playground/src/screens/OverlayBanner.tsx and on line 26, you can insert a testID="just-a-test-ID" in the SafeArea component and it will have the same behavior as the reproduction demo on Android.

Expected behavior

Banner overlays should allow touches to pass through the overlay and activate UI underneath the overlay if using a NativeProp, such as testID.

Actual Behavior

Banner overlays do not allow touches to pass through the overlay and activate UI underneath the overlay if using a NativeProp, such as testID. This bug is only reproducible for React Native for Android, as React Native Navigation for iOS behaves normally, passing touch events to the views underneath the overlay.

Android: iOS:

Your Environment

• React Native Navigation version: 7.28.0
• React Native version: 0.68.2
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Emulator, Pixel 3a, API 32, Debug & Release

Reproducible Demo

Here is an example reproduction demo using react-native-navigation: https://github.com/mikewli/react-native-navigation

After running npm install, npm start, and npm run android, you will start the app in an Android emulator / device. This behavior was tested on an Android emulator, Pixel 3a, API 32 on Debug.

1. Tap Show banner overlay button
2. Try to tap Log layout message button
3. Observe that you cannot tap any button underneath the overlay thereafter

Are you willing to resolve this issue by submitting a Pull Request?

• ✖️   Yes, I have the time, and I know how to start.
• ✖️   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✅   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

I have also joined your Discord channel if you need to reach out for further questions / comments in addition to this issue tracker. My username is mikeli-fullstory#3174

[ericschaal]

@mikewli Same issue.

[Y-k-Y]

Any process??