React-native-navigation: [v6][ios] WKWebView in overlay ignore its touches

Created on 17 Mar 2020  路  5Comments  路  Source: wix/react-native-navigation

Issue Description

By showing a WKWebView at fullscreen (for example the one from https://github.com/react-native-community/react-native-webview) on iOS in the overlay, the touches pass through the overlay and hit the navigator behind (for example the stack).
It's like the WKWebView is ignoring the touch events if inside the overlay.

Steps to Reproduce / Code Snippets / Screenshots

The overlay component

const AppHover: FunctionComponent<Props> = (props) => {
  return (
    <WebView
      source={{ uri: 'https://infinite.red' }}
      style={{ flex: 1 }}
    />
  )
}

The overlay options

component: {
      name: "AppHover",
      options: {
        overlay: {
          interceptTouchOutside: false,
          handleKeyboardEvents: true
        },
        layout: {
          backgroundColor: "transparent",
          componentBackgroundColor: "transparent"
        }
      }
    }

Environment

  • React Native Navigation version: 6.3.0
  • React Native version: 0.61.5
  • Platform(s): iOS
  • Device: both emulator and device
iOS acceptebug 馃搶 pinned

Most helpful comment

We found a quick fix: we changed the hitTest and removed the check for the UIView (which was too generic, filtering also the WKWebView) and added a more specific condition, that should work.

#import "RNNOverlayWindow.h"
#import "RNNReactView.h"

@implementation RNNOverlayWindow

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView *hitTestResult = [super hitTest:point withEvent:event];

    if ([hitTestResult isKindOfClass:[UIWindow class]] || ([hitTestResult.subviews count] > 0 && [hitTestResult.subviews[0] isKindOfClass:RNNReactView.class])) {
        return nil;
    }

    return hitTestResult;
}

@end

All 5 comments

After some debugging, we have found that the issue is probably related with the hitTest implementation of the overlay window, down here
https://github.com/wix/react-native-navigation/blob/4355281d383165a78a2744b39a1b0130e7bfcf37/lib/ios/RNNOverlayWindow.m#L8)

This is caused because the WKWebView derivates from the UIView class, which is "filtered" by the hitTest, to understand if the tap is outside the overlay. (so in the very last view in the hierarchy)

The check of the UIView was added together with the check of UIWindow to fix this issue https://github.com/wix/react-native-navigation/issues/5889

We found a quick fix: we changed the hitTest and removed the check for the UIView (which was too generic, filtering also the WKWebView) and added a more specific condition, that should work.

#import "RNNOverlayWindow.h"
#import "RNNReactView.h"

@implementation RNNOverlayWindow

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView *hitTestResult = [super hitTest:point withEvent:event];

    if ([hitTestResult isKindOfClass:[UIWindow class]] || ([hitTestResult.subviews count] > 0 && [hitTestResult.subviews[0] isKindOfClass:RNNReactView.class])) {
        return nil;
    }

    return hitTestResult;
}

@end

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.

@geroale what about a pull request?

The same thing happens with the RN Switch component.

Was this page helpful?
0 / 5 - 0 ratings