How to touch and hold to select text in React Native

Question

I'm new to Android and trying to implement a rich editor using Text component of React Native. However when I touch the text and hold for a moment, the text was not highlighted and the top bar with selection actions was not shown like what behaves in a webview or other applications. What am I missing or do I need to implement this feature by myself? If so could you point a direction?

Answer 1

If you want click-and-hold-to-select-text using a Text component, this feature does not currently exist in React Native for iOS. You probably want to upvote https://react-native.canny.io/feature-requests/p/support-selecting-text-within-text-elements-for-copypaste-etc to suggest Facebook add support for this.

However, I've submitted support for on Android, as of React 0.30. But React iOS is drawing characters directly to the screen (and not using the native UITextView that supports a selectable property), so it is not supported there, and likely won't be for a long time.

RN 0.39 adds support to copy the entire text field, but does not yet include support for selecting a subset of the text field for copying.

Answer 2

As of now it is supported by react-native as well by adding props selectable={true}. Also on Android you can change the selected text color with selectionColor='orange'.

Example:

<Text selectable={true} selectionColor='orange'>You can select me</Text>

Answer 3

Be careful if the text is nested you should add selectable attribute to the top `

<Text selectable>
    <Text>
        some selectable text
    </Text>
</Text>