Clipboard

expo-clipboard provides an interface for getting and setting Clipboard content on Android, iOS, and Web.

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

Installation

expo install expo-clipboard

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

import * as React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import * as Clipboard from 'expo-clipboard';

export default function App() {
  const [copiedText, setCopiedText] = React.useState('');

  const copyToClipboard = () => {
    Clipboard.setString('hello world');
  };

  const fetchCopiedText = async () => {
    const text = await Clipboard.getStringAsync();
    setCopiedText(text);
  };

  return (
    <View style={styles.container}>
      <Button title="Click here to copy to Clipboard" onPress={copyToClipboard} />
      <Button title="View copied text" onPress={fetchCopiedText} />
      <Text style={styles.copiedText}>{copiedText}</Text>
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  copiedText: {
    marginTop: 10,
    color: 'red',
  },
});

API

import * as Clipboard from 'expo-clipboard';

Methods

`getStringAsync()`

Gets the content of the user's clipboard. Please note that calling this method on web will prompt the user to grant your app permission to "see text and images copied to the clipboard."

Returns

Promise<string>

A promise that resolves to the content of the clipboard.

`setString(text)`

Arguments

text (string) - The string to save to the clipboard.

Sets the content of the user's clipboard.

Returns

void

On web, this returns a boolean value indicating whether or not the string was saved to the user's clipboard. On iOS and Android, nothing is returned.

Event Subscriptions

`addClipboardListener(listener)`

Arguments

listener ((event: ClipboardEvent) => void) - Callback to execute when listener is triggered. The callback is provided a single argument that is an object with a content key.

Adds a listener that will fire whenever the content of the user's clipboard changes. This method is a no-op on Web.

Example:

addClipboardListener(({ content }: ClipboardEvent) => {
  alert('Copy pasta! Here's the string that was copied: ' + content);
});

Returns

Subscription

`removeClipboardListener(subscription)`

Arguments

subscription (Subscription) - The subscription to remove (created by addClipboardListener).

Removes the listener added by addClipboardListener. This method is a no-op on Web.

Example:

const subscription = addClipboardListener(() => {
  alert('Copy pasta!');
});
removeClipboardListener(subscription);

Returns

void

Types

`ClipboardEvent`

Name	Type	Description
content	`string`	The new content of the user's clipboard.

`Subscription`

Name	Type	Description
remove	`() => void`	A method to unsubscribe the listener.