1

We are working on an app where a user can read a document, highlight as section and leave a comment. We've tried a few libraries for text highlighting and ultimately built our own, however most of the npm packages I see follow a similar approach: use a TextInput but make uneditable.

We have highlighting working, but the problem is the user needs to be able to see their previous comments by clicking on the section they highlighted. However, onPress on the Text elements within the TextInput don't work.

Here's a trivial example

<TextInput>
  <Text onPress={() => console.log('hello')}>Some text</Text>
</TextInput>

The console.log('hello') will never fire. How can I keep the TextInput from blocking its children's onPress events?

And if not, does anyway else know of a way to make text selectable without using an input?

Note: I've only tested this on iOS -- I've seen some comments from people saying it works fine for Android

sbatson5
  • 648
  • 11
  • 19
  • As I know you can't render any component within `TextInput`. – Leri Gogsadze Dec 15 '20 at 19:51
  • @LeriGogsadze You can. I'm currently doing it. The example above works in terms of showing the text. – sbatson5 Dec 15 '20 at 19:54
  • Yeah, I checked but as I guess pushing on it triggers `onFocus` event, that's why the log function is canceled. – Leri Gogsadze Dec 15 '20 at 19:59
  • @LeriGogsadze Do you know of another way for me to have a selectable block of text? Every package I've seen uses `RCTMultilineTextInputView` under the hood, which has this same issue – sbatson5 Dec 15 '20 at 20:30
  • Did you try wix/react-native-zss-rich-text-editor? – Leri Gogsadze Dec 15 '20 at 20:50
  • I'm not sure that helps me. I'm not looking to actually edit the text. I want text that I can simply highlight with the native controls for selecting/copying text – sbatson5 Dec 15 '20 at 20:54
  • Sorry for the late resp. Did you set `selectable` prop to the Text component? – Leri Gogsadze Dec 16 '20 at 07:41
  • @LeriGogsadze Yes, but selectable either selects the whole text element or nothing at all. It won't allow me to just a few words in a paragraph – sbatson5 Dec 16 '20 at 15:56
  • Also facing this issue. To confirm, we've tested TextInput with children on Android and onPress is not called for the children. However, the library [react native selectable text](https://github.com/Astrocoders/react-native-selectable-text) has found a way to use `` for selectable text on Android (and therefore onPress does work for children). On iOS they use `` for some reason. – Noah Santacruz Mar 16 '21 at 08:54

0 Answers0