Links are no longer clickable/no onPress when selectable={true}

[MaxPMagee]

I'm trying to use autolink to render linkable text and allow clicking on URLs. Out of the box it works well, but when I set selectable={true}, I lose the clickability (you can copy and paste the link text, but clicking doesn't do anything). I've tried a couple of different tricks (making only the text selectable? trying to re-implement openURL in onPress), but these don't work either. It seems to be EITHER clickable links OR selectable text, not both.

By default, this doesn't allow selecting/copying/pasting, but links work without any custom onPress <Autolink style={styles.subject} text={notification.subject} />

<Autolink style={styles.subject} text={notification.subject} textProps={{ selectable: true }} />

This allows selecting/copying/pasting, also highlights the URL's I want to be clickable, but they're not. <Autolink style={styles.subject} text={notification.subject} selectable={true} />

This is just a flail that will clickable links, but plain text not selectable (even though it's explicitly specified true): <Autolink style={styles.subject} text={notification.subject} textProps={{ selectable: true }} onPress={(url) => { Linking.openURL(url); }} />

This is another stab at it that that results in selectable but not clickable links (basically the base behavior with selectable={true}): <Autolink style={styles.subject} text={notification.subject} selectable={true} onPress={(url) => { Linking.openURL(url); }} />

Is that working as designed or should I be able to get clickable and highlightable text (the way hypertext works on a browser)?

[joshswan]

This seems to be a shortcoming of RN or potentially the underlying platform. I did a bit of testing with the Text component itself, and selectable and onPress really don't place nicely together. It works somewhat ok if you put selectable on a paragraph and have onPress sections within it (i.e. "links" are clickable and the whole paragraph is copiable), but using both selectable and onPress on a section just doesn't work.

Only thing I can think of to suggest would be to leave the onPress as is and implement a custom solution for copying the links using onLongPress.

[MaxPMagee]

Ah, yeah, the problem here is we're dealing with text we don't know in advance, so we want to highlight and make that text clickable when it should be a link (and react-native-autolink works beautifully for that out of the box—great work). The copy-paste functionality is kind of secondary, so we're just going to roll with it as-is without it bing selectable.

Though the onLongPress suggestion is interesting, I think we really just want to be able to copy and paste all of the text rather than just the link. I'll experiment with onLongPress with select={true} and if I come up with anything interesting I'll respond here.

[MaxPMagee]

Well, I got it working sort of—still can't copy and paste non-link text, but if they just wanted the link, onLongPress can do that now: <Autolink style={styles.subject} text={notification.subject} onLongPress={(url: string) => { Clipboard.setString(url); Toast?.show(common_t(['linkCopied'])); }} />

In the process I also learned that react-native Clipboard is deprecated, but the commons clipboard they recommend doesn't work. 🤣