CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-expo-clipboard

Cross-platform clipboard management for React Native and Expo applications with text, image, and URL support

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

image-operations.mddocs/

Image Operations

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.

Capabilities

Get Image

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 }} 
    />
  );
}

Set Image

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);
}

Has Image

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);

Format Considerations

PNG Format

  • Use case: Screenshots, graphics with transparency, lossless quality
  • Quality: Always lossless (jpegQuality ignored)
  • File size: Larger than JPEG
  • Transparency: Supported

JPEG Format

  • Use case: Photos, images where file size matters
  • Quality: Configurable via jpegQuality (0.0 to 1.0)
  • File size: Smaller than PNG, depends on quality setting
  • Transparency: Not supported (converted to solid background)

Error Handling

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");
  }
}

Platform Considerations

  • Web: Operations may prompt for clipboard permissions
  • iOS/Android: Operations work without additional permissions
  • Data Format: Images are always returned with data URL prefix (data:image/...;base64,)
  • Input Format: setImageAsync expects raw Base64 string without data URL prefix
  • Memory: Large images consume significant memory when converted to Base64

docs

event-handling.md

image-operations.md

index.md

paste-button.md

text-operations.md

url-operations.md

tile.json