CODEWITHSUNDEEP
iosreact-native-render-html
sanghapark
sanghapark

Reputation: 270

How to select texts word by word in react-native-render-html (version: 4.2.3)

Thanks for the amazing library. It's similar to the previous questions, so I hope this will help him/her as well. But I will try to be more clear and provide some examples.

Basically, what I want is when I try to select the rendered text:

  1. I want to be able to select word by word by dragging,
  2. once selected, I want it to be prompted with a prompt "Copy" / "Paste" / "Look Up" which is a native iOS module.

So when we render the demo snippet and try to select the text, this is what we have. Please excuse the link haha.

Current:

Current Behavior. When we make selectable={true}, the copy tooltip pops up on top of the entire text element without allowing to select each word.

Desired:

Desired Behavior. So here we can drag each text and the ** copy/share/lookup** tooltip pops over. The tooltip is controlled by UIMenuController in iOS, but I couldn't find wherein the source code it's being manipulated or changed.

Any help or suggestion would be greatly appreciated, and thanks again for the library! My environment setting looks like below just in case.

react-native: 0.62.2
react-native-render-html: 4.2.3
iOS: 13.6

Upvotes: 4

Views: 2401

Answers (1)

Samson Akinfenwa
Samson Akinfenwa

Reputation: 59

Just add defaultTextProps={{selectable:true}} to it. it solves the problem for me.

<HTML
    defaultTextProps={{selectable:true}}
    source={{ HTML: "<p>some text</p>" }}
/>

Upvotes: 2

Related Questions