Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v6][ios] WKWebView in overlay ignore its touches #6051

Closed
geroale opened this issue Mar 17, 2020 · 5 comments · Fixed by #6829
Closed

[v6][ios] WKWebView in overlay ignore its touches #6051

geroale opened this issue Mar 17, 2020 · 5 comments · Fixed by #6829

Comments

@geroale
Copy link

geroale commented Mar 17, 2020

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
@geroale geroale changed the title Webview on overlay makes its touches pass through it Webview on overlay makes its touches pass through it (v6) Mar 17, 2020
@geroale geroale changed the title Webview on overlay makes its touches pass through it (v6) [v6] Webview on overlay makes its touches pass through it Mar 17, 2020
@geroale geroale changed the title [v6] Webview on overlay makes its touches pass through it [v6] VKWebView on overlay makes its touches pass through it Mar 17, 2020
@geroale geroale changed the title [v6] VKWebView on overlay makes its touches pass through it [v6] WKWebView on overlay makes its touches pass through it Mar 17, 2020
@geroale geroale changed the title [v6] WKWebView on overlay makes its touches pass through it [v6][ios] WKWebView on overlay makes its touches pass through it Mar 17, 2020
@geroale geroale changed the title [v6][ios] WKWebView on overlay makes its touches pass through it [v6][ios] WKWebView in overlay ignore its touches Mar 17, 2020
@geroale
Copy link
Author

geroale commented Mar 17, 2020

After some debugging, we have found that the issue is probably related with the hitTest implementation of the overlay window, down here

if ([hitTestResult isKindOfClass:[UIWindow class]] || [hitTestResult isMemberOfClass:UIView.class]) {
)

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 #5889

@geroale
Copy link
Author

geroale commented Mar 17, 2020

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

@stale
Copy link

stale bot commented Apr 17, 2020

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 stale bot added the 🏚 stale label Apr 17, 2020
@eladgel
Copy link

eladgel commented Apr 21, 2020

@geroale what about a pull request?

@stale stale bot removed the 🏚 stale label Apr 21, 2020
@VEnom42
Copy link

VEnom42 commented May 18, 2020

The same thing happens with the RN Switch component.

yogevbd added a commit that referenced this issue Dec 13, 2020
On iOS, `Switch` components do not function in overlays.

Code from @geroale in #6051 (comment)

Fixes #6051

Co-authored-by: Guy Carmeli <guyca@users.noreply.github.com>
Co-authored-by: Yogev Ben David <yogev132@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants