Cross-platform clipboard management for React Native and Expo applications with text, image, and URL support
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Clipboard image handling with Base64 encoding, format conversion, and quality controls for PNG and JPEG formats. Images are handled as Base64-encoded strings with accompanying metadata.
Retrieves an image from the user's clipboard in the specified format with quality options.
/**
* Gets the image from the user's clipboard and returns it in the specified format.
* On web, this prompts the user to grant permission to "see text and images copied to the clipboard."
* @param options - GetImageOptions object to specify the desired format of the image
* @returns Promise resolving to ClipboardImage object if image exists, null otherwise
*/
function getImageAsync(options: GetImageOptions): Promise<ClipboardImage | null>;
interface GetImageOptions {
/** The format of the clipboard image to be converted to */
format: 'png' | 'jpeg';
/**
* Specify the quality of the returned image, between 0 and 1. Defaults to 1 (highest quality).
* Applicable only when format is 'jpeg', ignored otherwise.
*/
jpegQuality?: number;
}
interface ClipboardImage {
/**
* A Base64-encoded string of the image data. Its format depends on the format option.
* The string is already prepended with 'data:image/png;base64,' or 'data:image/jpeg;base64,' prefix.
*/
data: string;
/** Dimensions (width and height) of the image pasted from clipboard */
size: {
width: number;
height: number;
};
}Usage Examples:
import * as Clipboard from "expo-clipboard";
import { Image } from 'react-native';
// Get PNG image (default quality)
const pngImage = await Clipboard.getImageAsync({ format: 'png' });
if (pngImage) {
console.log(`Image size: ${pngImage.size.width}x${pngImage.size.height}`);
}
// Get JPEG image with custom quality
const jpegImage = await Clipboard.getImageAsync({
format: 'jpeg',
jpegQuality: 0.8
});
// Use image in React Native component
const clipboardImage = await Clipboard.getImageAsync({ format: 'png' });
if (clipboardImage) {
return (
<Image
source={{ uri: clipboardImage.data }}
style={{ width: 200, height: 200 }}
/>
);
}Sets an image to the user's clipboard using a Base64-encoded string.
/**
* Sets an image in the user's clipboard
* @param base64Image - Image encoded as a base64 string, without MIME type prefix
*/
function setImageAsync(base64Image: string): Promise<void>;Usage Examples:
import * as Clipboard from "expo-clipboard";
import * as ImagePicker from 'expo-image-picker';
// Copy image from image picker
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
base64: true,
});
if (result.assets && result.assets[0].base64) {
await Clipboard.setImageAsync(result.assets[0].base64);
}
// Copy image from existing ClipboardImage
const existingImage = await Clipboard.getImageAsync({ format: 'png' });
if (existingImage) {
// Remove data URL prefix before setting
const base64Data = existingImage.data.split(',')[1];
await Clipboard.setImageAsync(base64Data);
}Checks whether the clipboard contains image content.
/**
* Returns whether the clipboard has image content.
* On web, this requires user permission to "see text and images copied to the clipboard"
* @returns Promise that resolves to true if clipboard has image content, false otherwise
*/
function hasImageAsync(): Promise<boolean>;Usage Examples:
import * as Clipboard from "expo-clipboard";
// Check for image before attempting to read
if (await Clipboard.hasImageAsync()) {
const image = await Clipboard.getImageAsync({ format: 'png' });
if (image) {
console.log(`Found image: ${image.size.width}x${image.size.height}`);
}
} else {
console.log("No image in clipboard");
}
// Conditional UI state
const hasImage = await Clipboard.hasImageAsync();
setImagePasteButtonVisible(hasImage);jpegQuality (0.0 to 1.0)All image operations may throw UnavailabilityError if clipboard functionality is not available on the current platform.
import * as Clipboard from "expo-clipboard";
import { UnavailabilityError } from 'expo-modules-core';
try {
const image = await Clipboard.getImageAsync({ format: 'png' });
} catch (error) {
if (error instanceof UnavailabilityError) {
console.log("Image clipboard operations not available");
}
}data:image/...;base64,)setImageAsync expects raw Base64 string without data URL prefix