React-native-navigation: [V2] Inconsistent behavior of overlays with the interceptTouchOutside option

[tolu360]

Issue Description

Navigation.showOverlay() behaves differently on iOS than it does on Android depending on the value of the option interceptTouchOutside.

Steps to Reproduce / Code Snippets / Screenshots

await Navigation.showOverlay({
        component: {
            name: 'myapp.InAppOverlay',
            options: {
                overlay: {
                    interceptTouchOutside: true, // false
                },
            },
        },
    });

With interceptTouchOutside: true: On Android, touch events fire outside the overlay but are ignored or do not fire in the overlay, such that a close button inside the overlay does not respond to touch. On iOS, touch events do not fire outside the overlay.

With interceptTouchOutside: false: On Android, touch events do not fire outside the overlay. On iOS, touch events fire outside the overlay.

It seems the correct behavior is what is obtained only on iOS or are these the intended behaviors?

[FILL THIS OUT - It will be extremely helpful]

---

Environment

• React Native Navigation version: 2.0.2500
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator & Device; Debug

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[vntguca]

This issue still hapens.

[ouabing]

This issue still happens. I use an overlay as a global component floating on the screen, setting interceptTouchOutside to false seems not work, touch events never fire outside.

UPDATE: This problem only exists in production mode in my case.

[Jazznight]

This issue still happens. In my case I set interceptTouchOutside to false for interactive with view outside of overlay. It only work in IOS but Android.

[vrgimael]

This still happens. Cannot use global overlay on Android as it does not allow for touches to go through to the actual components

[a396901990]

Stil happened to me

[flikQ]

Come on RNN team, this is crazy. This is the 3rd issue that has existed for over 6 months and not been addressed.

[reimertz]

Hey @flikQ, you should know that comments like this doesn't do anything at all to solve this issue. This is a OSS project maintained by Wix for free so that people like you and I can use it.

It's like you would ask me to borrow my drill machine, then realise it needs some oil replacement. Rather than just swapping it out yourself, you nag me about it every time you borrow it. :)

Do the right thing here and swap the oil! ❤️

[fjmorant]

This is still happening I think it should be reopened https://github.com/wix/react-native-navigation/issues/4953#issuecomment-498163338

[rendomnet]

still exists

[Natteke]

RN 61.5
RNN 6.0.1
Still happening

[wesdewitte]

I'm also having this issue with RN 0.61.5 and RNN 6.0.1.
Someone has a work around for this?

[Natteke]

I'm also having this issue with RN 0.61.5 and RNN 6.0.1.
Someone has a work around for this?

do you using react native gesture handler?

[wesdewitte]

I'm also having this issue with RN 0.61.5 and RNN 6.0.1.
Someone has a work around for this?

do you using react native gesture handler?

No i don't use that package.

[GlisboaDev]

@wesdewitte @Natteke I went through the same issue (React Native 0.62 / RNN 6.3.1) and I think I've found a work around.
It seems on android it won't work unless you have an interactive component inside it, also you must have pointerEvents undefined.
So for me the final code that got it working (didn't test production yet, but locally it seems to solve it):

    <View
      pointerEvents={Device.isIOS ? 'none' : undefined}
      style={{
        flex: 1,
        justifyContent: 'flex-end'
      }}
    >
      <Button
        style={{ display: 'none' }}
      ></Button>
... My other stuff here...
    </View>
  );

with Button being a simple button from react-native-elements. Not optimal having a 'invisible' component in there, but it works

[Natteke]

@GlisboaDev it is interesting.
For me (RN 6.5 / RNN 6.0.1) pointer events: none works fine for both platforms.

My issue was in global react-native-gesture-handler HOC that wraps all screens. He intercepted all events within overlay.

[GlisboaDev]

@Natteke for me I still had the issue even after unwrapping the overlay with the react-native-gesture-handler HOC. Only doing the above fixed it for me. Maybe worth to note that my 'overlay' was a fairly simple Toast-like component to display messages on top of all components and keep it while navigating back/forward.

[DennisMatthiasScherf]

Hello guys, I also had this problem and it drove my crazy. But I found a solution.

Problem: When the Toast is active, you can't scroll - any interaction outside the toast container is not being registered, even with overlay: { interceptTouchOutside: false, }, activated. This problem occurred on android only.

Solution: The root-toast element has to have a position:absolute, then touch events out of the toast will be registered again. You can than define the offset via top, or bottom css . Don't forget to give the root-toast element 100% width.

My Advice: Remove all elements from the toast and start simple, while testing simultaneously on android and ios.

Example:

Toast.tsx

<ToastView onPress={closeToast}>
<ToastContent><ToastText>{props.toastText || ''}</ToastText></ToastContent>
</ToastView>

// Style
const ToastView = styled.TouchableOpacity flex: 1; flex-direction: column-reverse; align-items: center; position: absolute; bottom: '40px'; width: 100%;