or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

event-handling.mdimage-operations.mdindex.mdpaste-button.mdtext-operations.mdurl-operations.md
tile.json

tessl/npm-expo-clipboard

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/expo-clipboard@8.0.x

To install, run

npx @tessl/cli install tessl/npm-expo-clipboard@8.0.0

index.mddocs/

Expo Clipboard

Expo Clipboard provides a comprehensive cross-platform clipboard management library for React Native and Expo applications. It enables developers to interact with the system clipboard across Android, iOS, and Web platforms, supporting text, images, URLs, and clipboard change events.

Package Information

  • Package Name: expo-clipboard
  • Package Type: npm
  • Language: TypeScript
  • Installation: npx expo install expo-clipboard
  • Platforms: Android, iOS, Web

Core Imports

import * as Clipboard from "expo-clipboard";

For specific functions:

import { 
  getStringAsync, 
  setStringAsync, 
  getImageAsync, 
  setImageAsync,
  ClipboardPasteButton 
} from "expo-clipboard";

Basic Usage

import * as Clipboard from "expo-clipboard";

// Basic text operations
await Clipboard.setStringAsync("Hello, world!");
const text = await Clipboard.getStringAsync();

// Check if clipboard has content
const hasText = await Clipboard.hasStringAsync();
const hasImage = await Clipboard.hasImageAsync();

// Image operations  
const image = await Clipboard.getImageAsync({ format: 'png' });
if (image) {
  await Clipboard.setImageAsync(image.data.split(',')[1]); // Remove data URL prefix
}

Architecture

Expo Clipboard is built around several key components:

  • Core API: Platform-agnostic functions for clipboard operations (getStringAsync, setStringAsync, etc.)
  • Platform Adaptors: Native implementations for iOS (ExpoClipboard.ts) and Web (ExpoClipboard.web.ts)
  • Type System: Complete TypeScript definitions with enums for content types and string formats
  • Event System: Clipboard change listeners for real-time updates (native platforms only)
  • UI Components: ClipboardPasteButton for iOS 16+ providing permission-free paste functionality

Capabilities

Text Operations

Core clipboard text functionality supporting plain text and HTML formats with async operations and permission handling.

function getStringAsync(options?: GetStringOptions): Promise<string>;
function setStringAsync(text: string, options?: SetStringOptions): Promise<boolean>;
function hasStringAsync(): Promise<boolean>;

interface GetStringOptions {
  preferredFormat?: StringFormat;
}

interface SetStringOptions {
  inputFormat?: StringFormat;
}

enum StringFormat {
  PLAIN_TEXT = 'plainText',
  HTML = 'html'
}

Text Operations

Image Operations

Clipboard image handling with Base64 encoding, format conversion, and quality controls for PNG and JPEG formats.

function getImageAsync(options: GetImageOptions): Promise<ClipboardImage | null>;
function setImageAsync(base64Image: string): Promise<void>;  
function hasImageAsync(): Promise<boolean>;

interface GetImageOptions {
  format: 'png' | 'jpeg';
  jpegQuality?: number;
}

interface ClipboardImage {
  data: string;
  size: {
    width: number;
    height: number;
  };
}

Image Operations

URL Operations (iOS Only)

Specialized URL clipboard handling that preserves URL content type information for better app integration.

function getUrlAsync(): Promise<string | null>;
function setUrlAsync(url: string): Promise<void>;
function hasUrlAsync(): Promise<boolean>;

URL Operations

Event Handling

Clipboard change event listeners for detecting and responding to clipboard content changes.

function addClipboardListener(listener: (event: ClipboardEvent) => void): EventSubscription;
function removeClipboardListener(subscription: EventSubscription): void;

interface ClipboardEvent {
  content: string; // @deprecated
  contentTypes: ContentType[];
}

enum ContentType {
  PLAIN_TEXT = 'plain-text',
  HTML = 'html',
  IMAGE = 'image',
  URL = 'url' // iOS only
}

Event Handling

Paste Button Component (iOS 16+)

Native iOS paste button component providing permission-free clipboard access with customizable appearance.

const isPasteButtonAvailable: boolean;

interface ClipboardPasteButtonProps {
  onPress: (data: PasteEventPayload) => void;
  backgroundColor?: string | null;
  foregroundColor?: string | null;
  cornerStyle?: CornerStyleType | null;
  displayMode?: DisplayModeType | null;
  imageOptions?: GetImageOptions | null;
  acceptedContentTypes?: AcceptedContentType[];
  style?: StyleProp<Omit<ViewStyle, 'backgroundColor' | 'borderRadius' | 'color'>>;
}

type PasteEventPayload = TextPasteEvent | ImagePasteEvent;

Paste Button Component

Common Types

type EventSubscription = {
  remove(): void;
};

type AcceptedContentType = 'plain-text' | 'image' | 'url' | 'html';
type CornerStyleType = 'dynamic' | 'fixed' | 'capsule' | 'large' | 'medium' | 'small';
type DisplayModeType = 'iconAndLabel' | 'iconOnly' | 'labelOnly';

interface TextPasteEvent {
  text: string;
  type: 'text';
}

interface ImagePasteEvent extends ClipboardImage {
  type: 'image';
}