Using the Device Clipboard in React Native

As a quickly evolving library, React Native is often supplemented by features from the community, only to consume them or incorporate similar concepts later on.

Up until a few months ago, using the native clipboard on iOS or Android meant installing an npm module and then configuring the native components in each device environment (configuring the library in XCode or modifying your configuration for Android).

It wasn't a huge burden, but it still required some platform specific knowledge and a few extra steps beyond being able to just plug and play with the module.

Existing packages

If you've tried using the native clipboard before in a React Native project you've probably used one of the two main libraries available for it: react-native-clipboard (iOS and Android) and react-native-pasteboard (iOS only).

With release 0.17 of React Native, those packages are no longer necessary. We now have a Clipboard component which works seemlessly for both iOS and Android.

How to use it

The functionality is as straight forward as it gets. There are no configuration file changes or library linkages required. Just import from the react-native package and go to town.

Here's how to import the component using the ES6 import syntax

  import React, {Clipboard} from 'react-native';

Then to set a value to the device clipboard call #setString

  Clipboard.setString('my string');

Getting the current value is a tiny bit more work, as it's returned asynchronously in a promise returned from #getString

  Clipboard.getString().then(function (content) {
    console.log(content);
  });

And if you want to use the ES7 await/async functionality (which React Native ships with enabled by default), it looks like this

  async function getString() {
    console.log(await Clipboard.getString());
  }

Just remember that your code has to be in the context of an async function for await to work properly.

The whole example

  import React, {Clipboard} from 'react-native';
  Clipboard.setString('my string');
  Clipboard.getString().then((content) => {
    console.log(content);
  });

Now with only a few lines of code you can set a value to the device clipboard, and retrieve it.

And that's it. Go forth and copy/paste.