[v2] [Android] interceptTouchOutside false does not work

[lukefanning]

Issue Description

On Android only, setting option interceptTouchOutside to false does not allow touch events to occur on elements underneath the overlay. On iOS it works perfectly.

Steps to Reproduce / Code Snippets / Screenshots

Navigation.showOverlay({
          component: {
              id: 'dashboard-action-button',
              name: '/dashboard-action-button',
              options: {
                  overlay: {
                      interceptTouchOutside: false,
                  },
              },
          },
      });

---

Environment

• React Native Navigation version: 2.16.0
• React Native version: 0.59.1
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device (Samsung Galaxy S8), Android 9.0,

[lukefanning]

I have started looking into this myself and so far I have found that in OverlayTouchDelegate.java in getTouchLocation(MotionEvent ev) this always returns TouchLocation.Inside. Logging I added around it:

04-05 16:32:41.886 13702 13702 D RNN     : GEtting action masked
04-05 16:32:41.886 13702 13702 D RNN     : Calling handleDown
04-05 16:32:41.886 13702 13702 D RNN     : hitRect0 0 1440 2672
04-05 16:32:41.887 13702 13702 D RNN     : event raw x: 309.375 y: 1696.7969

Hit rect is always the entire screen for the overlay I'm rendering (a single react-native-action-button)

I tried rendering out nothing for the overlay and its still the entire screen.

[lukefanning]

I ended up solving this by wrapping the action button in an absolute view with fixed width and height that becomes full size on opening the action button. Seems as though overlays on Android do not care about the value of pointerEvents on View components as the action button is internally wrapped by default by an absolute full screen View with pointerEvents=box-none

[rendomnet]

Did you found solution?

[LRNZ09]

Still happens on 2.20.2

[fjmorant]

Hi,

I am having the same issue, I add one more detail if your screen component is like:

<TouchableOpacity onPress={() => alert('Touch parent')}>
    <RowView>
        <TouchableOpacity onPress={() => alert('Touch child')}>
            <Icon name={'favourites'} />
        </TouchableOpacity>

        <Icon name={'notifications'} />
        <Icon name={'settings'} />
    </RowView>
</TouchableOpacity>

Favourites icon doesn't work it always show touch parent alert, and this works on iOS and without overlay screen.

Does anybody have a clue of what is going on?

Thanks

[eightyfive]

Hello @guyca

I tried to get some logs via:

$  adb logcat *:V | grep reactnativenavigation

But nothing fails, "touches outside" seem to be completely ignored (Android) and/or not passed through.

Could you point how could we help resolve/debug this issue further?

Thanks in advance.

[guyca]

Hey @eightyfive
There's an e2e test which covers interceptTouchOutside flag. You can find it here.

What would help is PRing a failing e2e test so we can understand the problem and debug it.

[fjmorant]

Hi @guyca ,

Created a PR with a new option in playground for overlay #5182

I know design is shit but I just wanted to prove that nested touchables in overlay don't work, you can only touch the parent but children somehow cannot respond.

Thanks for your help.

[guyca]

@fjmorant Thanks for looking into this. I'll get to it asap

[fjmorant]

@guyca Thanks

[eightyfive]

@guyca @fjmorant I'll keep an eye on this issue but after installing the playground locally on the same Android device I use, I cannot reproduce my problem.

Meaning I am doing something wrong in my RN app, playground (showOverlay) works as expected.