4

I'm trying to figure out how to disable text selection while in a React-Native WebView for my ios app. Using the css style user-select set to none on the site doesn't seem to be working while using a device or simulator but it does work in a browser. Is there a way to disable this using the React-Native WebView or do I need to use some native code to achieve this?

Using React-Native 0.30, iOS 9-10

Ryan Wilson
  • 1,743
  • 3
  • 15
  • 26

5 Answers5

2

I was able to disable zooming, text selection and other pointer events on the React Native side, by wrapping WebView in a View and setting a few props:

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>
jmwicks
  • 542
  • 5
  • 9
  • 3
    After adding this, it is disabling all webview touches. Is there any way to disable only long press to avoid the copy-select-paste option? – Sujit Apr 16 '18 at 04:38
1

Assuming that you are accessing a particular url on the webview in react native, then in the url, you can use the following tricks:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<div style="font-size:80%;padding-left:10px;padding-right:10px;">


<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) {
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    }

    function preventLongPressMenu(node) {
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    }

    function init() {
      preventLongPressMenu(document.getElementByTagName('body img'));
    }
  </script>
  <style>
    *:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
        -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

    }
  </style>
</head>

<body onload="init()"  >


TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>

</body>

The above will disable text selection, but it allows other functions such as "click". (it works in both iOS and android devices)

Enjoy...

Ken Lee
  • 6,985
  • 3
  • 10
  • 29
0

The documentation does not mention this, so I would go with native implementation, which is easier than it might seem. You just have to re-implement this files (and maybe some others) in a native module that includes the options you want, see this answer and this one.

Maybe this package can also help you implement your module: https://github.com/lucasferreira/react-native-webview-android

Community
  • 1
  • 1
martinarroyo
  • 9,389
  • 3
  • 38
  • 75
0

I found a solution. Please try.

* {
  -webkit-user-select: none;
  -webkit-touch-callout: none; 
}
Hayk Zohrabyan
  • 1
0

I found that add body {user-select: none} can resolve the issue.

body {user-select: none}
zhang p
  • 1