React-native: How to copy text from <Text> component

[imserhii]

Hi, guys. How to copy text from component? Any idea?

[antoniopresto]

Use onChangeText

[imserhii]

And then? I want to copy text from component.

[antoniopresto]

onChangeText: Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

onChangeText={(text) => this.setState({text}) }

https://facebook.github.io/react-native/docs/textinput.html#onchangetext

[imserhii]

But I want to copy text to clipboard. Sorry for my bad english.

[antoniopresto]

My English is not good. I speak Portuguese. 😅

Try using it in the callback:
https://www.npmjs.com/package/react-native-clipboard

[imserhii]

Cool, it works! But maybe you know react-native component with tooltip?
Like this:

[antoniopresto]

I've never seen 😕
The Facebook app Groups, made with react-native also does not have it, it displays an ugly popup.

[imserhii]

Well, react-native, challenge accepted!

[antoniopresto]

In fact, the popup is to select Text elements. For the TextInput, the selection usually works here.

[imserhii]

Yep, but only in TextInput.

[chirag04]

if you need custom actions with custom tooltip: https://github.com/chirag04/react-native-tooltip

[brentvatne]

Nice one @chirag04 :)

[Traviskn]

Is it possible to show the default iOS tooltip with the copy option on a text component? Or do we need to always use a custom tooltip?

[satya164]

@Traviskn You could have a read-only text-input I guess.

[joonhocho]

has anyone found a solution to this?
On iOS, native behavior is if you hold any text long enough, it should show the tooltip for copying.
I don't know how it works on Android, though.

[danielbh]

Any plans for making this work with iOS anytime soon for a normal Text element?

[shahchaitanya]

Try it :)
import {Clipboard} from 'react-native';

setClipboardContent = (msg) => {
Clipboard.setString(msg);
};

[jfilter]

For most people, this is enough:

<Text selectable>TEXT</Text>

[kholiavko-roman]

@jfilter, it works perfectly on android, but on iOS - it whows only 'Copy' dialog, without selecting range.
Did you know how enable opportunity to select text before copy ?

[skyl]

selectable doesn't yet work for react-native-macos but there is a workaround: https://github.com/ptmt/react-native-macos/issues/157