Clipboard is a clean slate temporary storage area in computers & mobile phones used to perform cut, copy and paste text functionality. By default the cut, copy and paste functionality works automatically in TextInput component in react native. Sometimes developer needs to manually push and pop the values of Clipboard. We would use the react native’s Clipboard component API to manually insert and get value of Clipboard. In this tutorial we would learn about React Native Copy Text to Clipboard API in Android iOS Example.
Content in this project React Native Copy Text to Clipboard Android iOS Example:
1. Import Platform, StyleSheet, View, TextInput, Clipboard, TouchableOpacity and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, TextInput, Clipboard, TouchableOpacity, Text } from ‘react-native’;
|
2. Create constructor() in your project. In constructor we would make 2 State named as clipboardText and textInputText.
clipboardText : Used to hold the Clipboard copy and cut text.
textInputText : Used to store the TextInput component entered text.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
constructor(props) {
super(props);
this.state = {
clipboardText: “”,
textInputText: “”
}
}
|
3. Create a function named as get_Text_From_Clipboard() with async() type of. ASYNC type of function always returns a promise.
await Clipboard.getString() : Used to get the current clipboard text.
|
1
2
3
4
5
6
7
8
9
|
get_Text_From_Clipboard = async () => {
var textHolder = await Clipboard.getString();
this.setState({
clipboardText: textHolder
})
}
|
4. Create a function named as set_Text_Into_Clipboard(). In this function we would set the TextInput entered text into Clipboard API.
Clipboard.setString() : Setting up any text manually in Clipboard.
|
1
2
3
4
5
|
set_Text_Into_Clipboard = async () => {
await Clipboard.setString(this.state.textInputText);
}
|
5. Create 1 TextInput component, 2 Buttons using TouchableOpacity component & 1 Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Text Here”
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
onChangeText={value => this.setState({textInputText: value})}
/>
<TouchableOpacity onPress={this.get_Text_From_Clipboard} activeOpacity={0.8} style={styles.button} >
<Text style={styles.TextStyle}> PASTE THE COPIED TEXT </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.set_Text_Into_Clipboard} activeOpacity={0.8} style={styles.button} >
<Text style={styles.TextStyle}> COPY TEXTINPUT TEXT INTO CLIPBOARD </Text>
</TouchableOpacity>
<Text style={{ fontSize: 20 }}>{this.state.clipboardText}</Text>
</View>
);
}
|
6. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
const styles = StyleSheet.create(
{
MainContainer:
{
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
flex: 1,
padding: 20,
paddingBottom: 0,
justifyContent: ‘center’,
alignItems: ‘center’
},
textInputStyle: {
textAlign: ‘center’,
height: 41,
width: ‘92%’,
borderWidth: 1,
borderColor: ‘#AA00FF’,
borderRadius: 8,
marginBottom: 20
},
button: {
width: ‘92%’,
paddingTop: 12,
paddingBottom: 12,
backgroundColor: ‘#AA00FF’,
borderRadius: 5,
marginBottom: 20
},
TextStyle: {
color: ‘#fff’,
textAlign: ‘center’,
}
});
|
Screenshots:
Also Read :
React Native Generate Release key hash for Facebook Login in Windows
React Native Expandable ListView in Android iOS Example Tutorial
React Native Convert Complete Array Object To Single String Variable
React Native Open Specific App in Google Play Store from App in Android
Generate QR Code in React Native Android iOS App Example Tutorial
