expo-clipboard
provides an interface for getting and setting Clipboard content on Android, iOS, and Web.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-clipboard
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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 = async () => { await Clipboard.setStringAsync('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', }, });
import * as Clipboard from 'expo-clipboard';
⚠️On Web, this module uses theAsyncClipboard
API, which might behave differently between browsers or not be fully supported. Especially on WebKit, there's an issue which makes this API unusable in asynchronous code. Click here for more details.
Name | Type | Description |
---|---|---|
options | GetImageOptions | A GetImageOptions object to specify the desired format of the image. |
Gets the image from the user's clipboard and returns it in the specified format. 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."
const img = await Clipboard.getImageAsync({ format: 'png' }); // ... <Image source={{ uri: img?.data }} style={{ width: 200, height: 200 }} />
Promise<ClipboardImage | null>
If there was an image in the clipboard, the promise resolves to
a ClipboardImage
object containing the base64 string and metadata of the image.
Otherwise, it resolves to null
.
Name | Type | Description |
---|---|---|
options | GetStringOptions | Options for the clipboard content to be retrieved. |
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."
Promise<string>
A promise that resolves to the content of the clipboard.
Gets the URL from the user's clipboard.
Promise<string | null>
A promise that fulfills to the URL in the clipboard.
Returns whether the clipboard has a image content.
On web, this requires the user to grant your app permission to "see text and images copied to the clipboard".
Promise<boolean>
A promise that fulfills to true
if clipboard has image content, resolves to false
otherwise.
Returns whether the clipboard has text content. Returns true for both plain text and rich text (e.g. HTML).
On web, this requires the user to grant your app permission to "see text and images copied to the clipboard".
Promise<boolean>
A promise that fulfills to true
if clipboard has text content, resolves to false
otherwise.
Returns whether the clipboard has a URL content.
Promise<boolean>
A promise that fulfills to true
if clipboard has URL content, resolves to false
otherwise.
Name | Type | Description |
---|---|---|
base64Image | string | Image encoded as a base64 string, without MIME type. |
Sets an image in the user's clipboard.
const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, base64: true, }); await Clipboard.setImageAsync(result.base64);
Promise<void>
Name | Type | Description |
---|---|---|
text | string | - |
Deprecated. UsesetStringAsync()
instead.
Sets the content of the user's clipboard.
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.
Name | Type | Description |
---|---|---|
text | string | The string to save to the clipboard. |
options | SetStringOptions | Options for the clipboard content to be set. |
Sets the content of the user's clipboard.
Promise<boolean>
On web, this returns a promise that fulfills to a boolean value indicating whether or not
the string was saved to the user's clipboard. On iOS and Android, the promise always resolves to true
.
Name | Type | Description |
---|---|---|
url | string | The URL to save to the clipboard. |
Sets a URL in the user's clipboard.
Promise<void>
Name | Type | Description |
---|---|---|
listener | (event: ClipboardEvent) => void | Callback to execute when listener is triggered. The callback is provided a single argument that is an object containing information about clipboard contents. |
Adds a listener that will fire whenever the content of the user's clipboard changes. This method is a no-op on Web.
Clipboard.addClipboardListener(({ contentTypes }: ClipboardEvent) => { if (contentTypes.includes(Clipboard.ContentType.PLAIN_TEXT)) { Clipboard.getStringAsync().then(content => { alert('Copy pasta! Here\'s the string that was copied: ' + content) }); } else if (contentTypes.includes(Clipboard.ContentType.IMAGE)) { alert('Yay! Clipboard contains an image'); } });
Name | Type | Description |
---|---|---|
subscription | Subscription | The subscription to remove (created by addClipboardListener). |
Removes the listener added by addClipboardListener. This method is a no-op on Web.
const subscription = addClipboardListener(() => { alert('Copy pasta!'); }); removeClipboardListener(subscription);
void
Name | Type | Description |
---|---|---|
content | string | - |
contentTypes | ContentType[] | An array of content types that are available on the clipboard. |
Name | Type | Description |
---|---|---|
remove | () => void | A method to unsubscribe the listener. |
Name | Type | Description |
---|---|---|
data | string | A Base64-encoded string of the image data.
Its format is dependent on the format option.You can use it directly as the source of an Image element.Example
|
size | { height: number, width: number } | Dimensions (width and height ) of the image pasted from clipboard. |
Name | Type | Description |
---|---|---|
format | 'png' | 'jpeg' | The format of the clipboard image to be converted to. |
jpegQuality (optional) | number | Specify the quality of the returned image, between 0 and 1 . Defaults to 1 (highest quality).
Applicable only when format is set to jpeg , ignored otherwise.Default: 1
|
Name | Type | Description |
---|---|---|
preferredFormat (optional) | StringFormat | The target format of the clipboard string to be converted to, if possible. Default: StringFormat.PLAIN_TEXT
|
Name | Type | Description |
---|---|---|
inputFormat (optional) | StringFormat | The input format of the provided string.
Adjusting this option can help other applications interpret copied string properly. Default: StringFormat.PLAIN_TEXT
|
Type used to define what type of data is stored in the clipboard.
HTML
ContentType.HTML = "html"
IMAGE
ContentType.IMAGE = "image"
PLAIN_TEXT
ContentType.PLAIN_TEXT = "plain-text"
URL
ContentType.URL = "url"
Type used to determine string format stored in the clipboard.
HTML
StringFormat.HTML = "html"
PLAIN_TEXT
StringFormat.PLAIN_TEXT = "plainText"