'How to copy text to clipboard in react-native?

I would like to integrate a small text (my e-mail address) but I would like the user can to copy this text. I think of a button, when we click on it the e-mail address is copied and it can be pasted outside the app. How to do this?

<View>
<Text style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
             [email protected]
</Text></View>

I am a novice, any help would be greatly appreciated.

Solution 1:^[1]

You can use Clipboard from @react-native-community.

Here's how you can use it:

import Clipboard from '@react-native-clipboard/clipboard';

<TouchableOpacity onPress={() => Clipboard.setString('[email protected]')}>
  <View>
    <Text style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
                [email protected]
    </Text>
  </View>
</TouchableOpacity>

Solution 2:^[2]

Set selectable prop of the Text component true and the content will be copied to the clipboard with long press on the text.

<Text selectable={true}>
  Your text
</Text>

Solution 3:^[3]

import { Button, Clipboard } from 'react-native' is replace with react-native-community/clipboard

Solution 4:^[4]

fayeed is right. You can use clipboard for user to copy a string.

Also, you easily give your component a clipboard too. As fayeed did above

<Text 
onPress={()=>Clipboard.setString('[email protected]')}
style={{color: 'red', fontSize: 14 , fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', marginTop: 3, marginLeft: 25, marginBottom: 17}}> 
                [email protected]
    </Text>

Solution 5:^[5]

Since I guess may people use expo, you need another lib there.

expo install expo-clipboard

import * as Clipboard from 'expo-clipboard';

// Then just do like in the accepted solution:
Clipboard.setString('[email protected]');

Solution taken from: https://github.com/react-native-clipboard/clipboard/issues/110#issuecomment-931340618

Solution 6:^[6]

Edit: Apparently outdated, see comment and top answer.

Welcome to stackoverflow! Please read https://stackoverflow.com/help/how-to-ask to learn how to ask good questions; more often than not, the process of formulating the question (if done properly) will lead you to the answer!

So, you managed to get your text on the screen using Text, and now you want the user to be able to copy it; I can imagine three ways of doing this:

How to make text selectable (and copyable) in react-native?
How to show "copy popover" in react-native?
How to copy text to clipboard on button tap in react-native?

Let's focus on the last one. We can break it down further:

How to make a button in react-native?
How to execute a function on button tap? (in react-native)
How to copy text to clipboard programatically? (in react-native)

If we google these phrases, we find the relevant documentation:

...with the relevant piece of code:

import { Button, Clipboard } from 'react-native'
...
const email = '[email protected]'
const copyIt = ()=> Clipboard.setString(email)
...
<Button
  onPress={copyIt}
  title={email}
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ferran Maylinch
Solution 2	ArmX
Solution 3	Rajesh Nasit
Solution 4	serhendi
Solution 5	Ferran Maylinch
Solution 6

'How to copy text to clipboard in react-native?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]