React-native-webview: Allow disabling copy | look up | share menu on text select.

[apostopher]

Is your feature request related to a problem? If so, Please describe.

When user long-presses text inside react-native-wrbview the default copy | look up | share menu appears.

Describe the solutions you came up with

I tried injecting the following CSS into the HTML page.

*:not(input):not(textarea) {
  -webkit-touch-callout: none !important;
  -webkit-user-select: text !important; // I want to allow users to select text
}

but the copy | look up | share menu still apprears.

Additional context

it would be nice to allow disabling or customizing this menu.

[apostopher]

I was able to hide the menu using this solution: How do I disable default text selection behaviour in a WKWebView

update the code in this file: node_modules/react-native-webview/ios/RNCWebView.m

- (instancetype)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    super.backgroundColor = [UIColor clearColor];
    _bounces = YES;
    _scrollEnabled = YES;
    _showsHorizontalScrollIndicator = YES;
    _showsVerticalScrollIndicator = YES;
    _directionalLockEnabled = YES;
    _automaticallyAdjustContentInsets = YES;
    _contentInset = UIEdgeInsetsZero;
    _savedKeyboardDisplayRequiresUserAction = YES;
    _savedStatusBarStyle = RCTSharedApplication().statusBarStyle;
    _savedStatusBarHidden = RCTSharedApplication().statusBarHidden;

#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000 /* __IPHONE_11_0 */
    _savedContentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
#endif
  }

  if (@available(iOS 12.0, *)) {
    // Workaround for a keyboard dismissal bug present in iOS 12
    // https://openradar.appspot.com/radar?id=5018321736957952
    [[NSNotificationCenter defaultCenter]
      addObserver:self
      selector:@selector(keyboardWillHide)
      name:UIKeyboardWillHideNotification object:nil];
    [[NSNotificationCenter defaultCenter]
      addObserver:self
      selector:@selector(keyboardWillShow)
      name:UIKeyboardWillShowNotification object:nil];

    // Workaround for StatusBar appearance bug for iOS 12
    // https://github.com/react-native-community/react-native-webview/issues/62
      [[NSNotificationCenter defaultCenter] addObserver:self
                                               selector:@selector(showFullScreenVideoStatusBars)
                                                   name:UIWindowDidBecomeVisibleNotification
                                                 object:nil];

      [[NSNotificationCenter defaultCenter] addObserver:self
                                               selector:@selector(hideFullScreenVideoStatusBars)
                                                   name:UIWindowDidBecomeHiddenNotification
                                                 object:nil];
    // https://github.com/react-native-community/react-native-webview/issues/934
      [[NSNotificationCenter defaultCenter] addObserver:self
                                               selector:@selector(menuWillShow:)
                                                   name:UIMenuControllerWillShowMenuNotification
                                                object:[UIMenuController sharedMenuController]];
  }

  return self;
}

- (void)dealloc
{
  [[NSNotificationCenter defaultCenter] removeObserver:self];
 // https://github.com/react-native-community/react-native-webview/issues/934
  [[NSNotificationCenter defaultCenter] removeObserver:self
                                        name:UIMenuControllerWillShowMenuNotification
                                        object:[UIMenuController sharedMenuController]];
}

 // https://github.com/react-native-community/react-native-webview/issues/934
-(void)findUI:(UIView*) view{
    if([@"UICalloutBar" isEqualToString:[[view class] description]]){
        [view removeFromSuperview ];
        return;
    }

    for(UIView* subview in view.subviews){
        [self findUI: subview];
    }
}

 // https://github.com/react-native-community/react-native-webview/issues/934
-(void)menuWillShow:(NSNotification *)notification
{
    NSArray* windows = [[UIApplication sharedApplication] windows];
    for(UIWindow* window in windows){
        if([@"UITextEffectsWindow" isEqualToString:[[window class] description]]){
            [self findUI:window];
        }
    }
}

I'm using patch-package to add this patch in react-native-webview v7.4.0

[JB-CHAUVIN]

+1 is there anyway to disable this without patching the package ?

[dzcpy]

+1, I hope it can be built-in in this project