React Native Copy Text to Clipboard Example

This tutorial explains how to perform copy text to clipboard in react native application with simple example. Reading and writing from the Clipboard is incredibly easy in React Native by using the Clipboard API. It will work on both Android and IOS platform. 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.

React Native Copy to Clipboard :

Use of Clipboard :

Copy the value using :

const clipboardContent = await Clipboard.getString();

Paste the value using :

await Clipboard.setString(this.state.text);

Lets see the below steps that helps to perform copy text to clipboard in react native application with simple example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

import React, { Component } from 'react';
import { Text, StyleSheet, View, TextInput, TouchableOpacity, Clipboard } from 'react-native';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created two state variables named as clipboardText and textInputText. 
clipboardText : Used to hold the Clipboard copy and cut text.
textInputText : Used to store the TextInput component entered text.

 constructor(props) {
    super(props);
    this.state = {
      clipboardText: "",
      textInputText: ""
    }
  }

Step 5: Lets create setTextIntoClipboard and getTextFromClipboard function in your App component.
setTextIntoClipboard : Used to get the current clipboard text.
getTextFromClipboard : Setting up any text manually in Clipboard.

setTextIntoClipboard = async () => {
    await Clipboard.setString(this.state.textInputText);
  }

  getTextFromClipboard = async () => {
    var textHolder = await Clipboard.getString();
    this.setState({
      clipboardText: textHolder
    })
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

render() {
    return (
      <View style={styles.container} >
        <TextInput
          placeholder="Enter Text Here"
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
          onChangeText={value => this.setState({ textInputText: value })}
        />

        <TouchableOpacity onPress={this.getTextFromClipboard} activeOpacity={0.7} style={styles.touchableButton} >
          <Text style={styles.TextStyle}> PASTE THE COPIED TEXT </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.setTextIntoClipboard} activeOpacity={0.7} style={styles.touchableButton} >
          <Text style={styles.TextStyle}> COPY TEXTINPUT TEXT INTO CLIPBOARD </Text>
        </TouchableOpacity>

        <Text style={{ fontSize: 20 }}>Display Text : {this.state.clipboardText}</Text>
      </View>
    );
  }

Step 7 : Apply the below style sheet design.  

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    textInputStyle: {
      textAlign: 'center',
      height: 41,
      width: '92%',
      borderWidth: 1,
      borderColor: '#009688',
      borderRadius: 8,
      marginBottom: 20
    },
    touchableButton: {
      width: '80%',
      padding: 10,
      backgroundColor: '#009688',
      marginBottom: 10,
    },
    TextStyle: {
      color: '#fff',
      fontSize: 18,
      textAlign: 'center',
    }
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to perform copy text to clipboard in react native application in android and iOS application.

import React, { Component } from 'react';
import { Text, StyleSheet, View, TextInput, TouchableOpacity, Clipboard } from 'react-native';


export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      clipboardText: "",
      textInputText: ""
    }
  }

  setTextIntoClipboard = async () => {
    await Clipboard.setString(this.state.textInputText);
  }

  getTextFromClipboard = async () => {
    var textHolder = await Clipboard.getString();
    this.setState({
      clipboardText: textHolder
    })
  }

  render() {
    return (
      <View style={styles.container} >
        <TextInput
          placeholder="Enter Text Here"
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
          onChangeText={value => this.setState({ textInputText: value })}
        />

        <TouchableOpacity onPress={this.getTextFromClipboard} activeOpacity={0.7} style={styles.touchableButton} >
          <Text style={styles.TextStyle}> PASTE THE COPIED TEXT </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.setTextIntoClipboard} activeOpacity={0.7} style={styles.touchableButton} >
          <Text style={styles.TextStyle}> COPY TEXTINPUT TEXT INTO CLIPBOARD </Text>
        </TouchableOpacity>

        <Text style={{ fontSize: 20 }}>Display Text : {this.state.clipboardText}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    textInputStyle: {
      textAlign: 'center',
      height: 41,
      width: '92%',
      borderWidth: 1,
      borderColor: '#009688',
      borderRadius: 8,
      marginBottom: 20
    },
    touchableButton: {
      width: '80%',
      padding: 10,
      backgroundColor: '#009688',
      marginBottom: 10,
    },
    TextStyle: {
      color: '#fff',
      fontSize: 18,
      textAlign: 'center',
    }
  });

Screenshot :

This is all about React Native Copy Text to Clipboard Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.