How to get text selection of the react-native WebView?

user_2355117 0
Viewed 1928

We are building an news reader APP using React Native. Each news article are rendered inside a WebView.

We'd like to make user can select some text of the article and highlight it. Just like what can be seen in normal ebook reader Apps. Like this:

enter image description here

In a normal Desktop web browser. We can use 'mouseup' even and window.getSelection() to do the work. But in ReactNative's WebView. We don't know how to do it.

Please help, thanks.

react-native webview android ios
1 Answers

You can use mouseup event and get content with window.getSelection(). The only problem here is that RN part is not aware of this event happening inside webview, however you can propogate this event up to React Native with window.postMessage and onMessage prop of RN WebView. Alternatively you can use my tiny wrapper for communication between ReactNative and WebView

user_38918250
Related