Last week I wrote a brief article about showing Toasts on Android with React Native. In that article I mentioned using the Clipboard in React Native, and it’s something that I had to do recently so I thought I’d write another article about Copying to the Clipboard with React Native. Reading or copying to the clipboard is actually very easy in React Native – you can implement all the functionality using the stock Clipboard API.

Clipboard API on React Native

The Clipboard API has two main functions – getString and setString. getString retrieves the current content from the clipboard and setString sets new content.

So to read data from the clipboard you would use something like this:

async readFromClipboard() {
    let content = await Clipboard.getString();
    alert(content);
}

And to write new data to the clipboard, you could use something like this:

async writeToClipboard() {
    await Clipboard.setString("write");
}

Putting it all together

To summarize everything above I thought it might be a good idea to create a Snack on Expo. Snacks are really cool, you can play around from React Native from within your browser – it’s like a fully functional playground for React Native. Anyway, I made snack that can retrieve the content of a device’s clipboard and also set the content of the clipboard to a number from 1 to 10(there’s a ‘GET’ and a ‘SET’ button). It’s pretty barebones but it does a good job of conveying the basics above. Check it out below:

Showing Toast with React Native

Last week I wrote another post about showing Toasts with React Native on Android. You can read it here if your interested. It might be useful to tie the two concepts together if you’re creating a copy button or something along those lines!