How to use React Native Community Clipboard

4/21/2022

Request, Deliver, Revise, Done

Get unlimited UI Design & React Development for a fixed monthly price

50% off your first month

Introduction

Need to read from and write to the device clipboard in your React Native app? Luckily accessing the clipboard is very easy in React Native thanks to a community package called React Native Community Clipboard. Best of all, it works not only on iOS and Android but on Windows and MacOS too.

Installing React Native Community Clipboard

To install React Native Community Clipboard, simply run the following NPM command in your project root:

npm install @react-native-clipboard/clipboard

If you are using Yarn rather than NPM, you can install the package using the following command:

yarn add @react-native-clipboard/clipboard

In order for the package to work on iOS, you need to install the associated cocoapods package. Simply run the following command in your project root:

npx pod-install

You are now ready to go!

Check you're using the correct package

Just a quick thing you might need to be aware of - the clipboard package used to be a part of the React Native package itself, but has since been removed and taken over and maintained as a community package.

Make sure when you import the Clipboard module your import statement references the community package as follows, rather than from React Native directly:

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

How to copy to the clipboard with React Native Community Clipboard

First let's create the basic skeleton of our component which we'll use to read and write from the clipboard:

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

export default function ClipboardExample() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          padding: 20,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      ></View>
    </SafeAreaView>
  );
}

Now we can import the Clipboard API from the package at the top of our component:

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

Let's add a state value which will store the text value from our text input field:

const [text, setText] = useState('');

Next we'll add a function which will take our text state value and copy it to the clipboard:

const copyToClipboard = () => {
  Clipboard.setString(text);
};

Now let's add our TextInput and use it to write the value to our state value when it changes using the onTextChange method:

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View
      style={{
        flex: 1,
        padding: 20,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <TextInput
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, width: '100%' }}
        value={text}
        onChangeText={setText}
      />
    </View>
  </SafeAreaView>
);

And then we'll add a button below our TextInput which will run our copyToClipboard function when pressed:

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View
      style={{
        flex: 1,
        padding: 20,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <TextInput
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, width: '100%' }}
        value={text}
        onChangeText={setText}
      />
      <Button title="Copy to clipboard" onPress={() => copyToClipboard()} />
    </View>
  </SafeAreaView>
);

Copying to the clipboard with React Native Community Clipboard

As in the image above, you should now be able to type some text into the text input, click the button, and it should be copied to your clipboard allowing you to paste it elsewhere.

See below for the full code for our copying example:

import React, { useState } from 'react';
import { SafeAreaView, View, Button, TextInput } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

export default function ClipboardExample() {
  const [text, setText] = useState('');

  const copyToClipboard = () => {
    Clipboard.setString(text);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          padding: 20,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <TextInput
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, width: '100%' }}
          value={text}
          onChangeText={setText}
        />
        <Button title="Copy to clipboard" onPress={() => copyToClipboard()} />
      </View>
    </SafeAreaView>
  );
}

How to paste from the clipboard with React Native Community Clipboard

Now let's add a method to paste text from our clipboard and set it as our text value, using the getString method. This will read the value from the device's clipboard, and then we use the setText function to write it to our state value:

const pasteFromClipboard = async () => {
  const clipboardText = await Clipboard.getString();
  setText(clipboardText);
};

Then all we need to do is add another button to the component which will run the pasteFromClipboard method:

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View
      style={{
        flex: 1,
        padding: 20,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <TextInput
        style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, width: '100%' }}
        value={text}
        onChangeText={setText}
      />
      <Button title="Copy to clipboard" onPress={() => copyToClipboard()} />
      <Button title="Paste from clipboard" onPress={() => pasteFromClipboard()} />
    </View>
  </SafeAreaView>
);

Pasting from the clipboard with React Native Community Clipboard

Now you should be able to paste from your clipboard! See the full code below:

The full example code

import React, { useState } from 'react';
import { SafeAreaView, View, Button, TextInput } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

export default function ClipboardExample() {
  const [text, setText] = useState('');

  const copyToClipboard = () => {
    Clipboard.setString(text);
  };

  const pasteFromClipboard = async () => {
    const clipboardText = await Clipboard.getString();
    setText(clipboardText);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          padding: 20,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <TextInput
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, width: '100%' }}
          value={text}
          onChangeText={setText}
        />
        <Button title="Copy to clipboard" onPress={() => copyToClipboard()} />
        <Button title="Paste from clipboard" onPress={() => pasteFromClipboard()} />
      </View>
    </SafeAreaView>
  );
}