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:
nice tutorial , i love to react native .
Can you possible to do a tutorial on how to install and use native base.( latest version). Please include what are the modification included in the projet file.
Jithin you just have to execute two commands ,
1. npm install native-base –save to install the native base .
2. react-native link to index the installed native base to react native. And one more thing start the Command prompt as run as administrator mode.
sorry a i am getting errors. i am using expo . can you possible to explain via tutorial
Sorry Jithin, This code is working correctly in android emulator and real device but i haven’t check the code in expo.
Thanks friend. You’re kind