Working with Clipboard and Documents

1. Setting Clipboard String

Property	Description	Example
setString()	Sets the clipboard content to a string value	`import { Clipboard } from 'expo-clipboard'; Clipboard.setString('Hello, world!');`

Note: On web, the clipboard API requires user interaction (e.g., a button press) to function.

2. Getting Clipboard String

Property	Description	Example
Clipboard.getString()	Asynchronously retrieves the current string content from the system clipboard.	`import * as Clipboard from 'expo-clipboard'; Clipboard.getString().then((content) => { console.log("Clipboard content:", content); });`

Note: On iOS, the clipboard content is only accessible to the app that set it. On Android, clipboard access is more permissive.

3. Setting Clipboard Image

Property	Description	Values
image	Image to set on the clipboard	`ImageSource`

Example: Setting Clipboard Image

import * as Clipboard from 'expo-clipboard';

const setImageToClipboard = async () => {
  await Clipboard.setImageAsync('https://example.com/image.png');
};

setImageToClipboard();

4. Getting Clipboard Image

Property	Description	Notes
getImageAsync()	Retrieves the image data from the clipboard	Returns a Promise resolving to a base64 encoded string or null if no image is present

Example: Getting Clipboard Image

import * as Clipboard from &#x27;expo-clipboard&#x27;;

const getClipboardImage = async () => {
  const image = await Clipboard.getImageAsync();
  if (image) {
    console.log("Image data: ", image);
  } else {
    console.log("No image found in clipboard");
  }
};

getClipboardImage();

Note: On iOS, the image must be in PNG or JPEG format to be accessible via the clipboard.

5. Checking Clipboard Content

Method	Description	Return Type	Notes
Clipboard.getString()	Retrieves the current text content from the system clipboard	`Promise<string>`	Resolves to an empty string if clipboard is empty
Clipboard.hasString()	Checks if there is text content in the clipboard	`Promise<boolean>`	Useful for conditional logic before reading
Clipboard.getImage()	Retrieves image data from clipboard (iOS only)	`Promise<string \| null>`	Returns base64 encoded image or null if no image

Example: Check Clipboard Content

import * as Clipboard from &#x27;expo-clipboard&#x27;;

async function checkClipboard() {
  const hasText = await Clipboard.hasString();
  if (hasText) {
    const text = await Clipboard.getString();
    console.log("Clipboard content:", text);
  } else {
    console.log("Clipboard is empty");
  }
}

Note: On Android, clipboard access requires the READ_CLIPBOARD permission. On iOS, clipboard access is generally unrestricted.

6. Handling Clipboard Events

Event	Description	Notes
onClipboardChange	Event triggered when clipboard content changes	Available on iOS and Android

Example: Listening to Clipboard Changes

import { useClipboard } from 'expo-clipboard';

export default function ClipboardExample() {
  const { text, setStringAsync } = useClipboard();

  const handleClipboardChange = () => {
    console.log('Clipboard content changed:', text);
  };

  return (
    <View>
      <Text>Current clipboard text: {text}</Text>
    </View>
  );
}

Note: The onClipboardChange event is not supported on all platforms and may require additional permissions or setup.

7. Using Print API

Property	Description	Values
print	Prints the current document or content	`function(content: string \| HTMLElement)`
printAsync	Asynchronously prints the current document or content	`function(content: string \| HTMLElement): Promise<void>`

Example: Printing HTML Content

import { printAsync } from 'expo-print';

const htmlContent = '<h1>Hello World</h1><p>This is a test.</p>';

printAsync(htmlContent);

Example: Printing with Custom Options

import { printAsync } from 'expo-print';

const options = {
  printer: 'printer-name',
  landscape: true,
  pageSize: 'A4'
};

printAsync('<h1>Printed Content</h1>', options);

Note: The Print API is only available on mobile platforms (iOS and Android). It does not work in the browser or on desktop.

8. Printing HTML Content

Example: Print HTML content using Expo

import { printAsync } from &#x27;expo-print&#x27;;

const htmlContent = `
<html>
  <head></head>
  <body>
    <h1>Hello from Expo!</h1>
    <p>This content is being printed.</p>
  </body>
</html>
`;

printAsync({ html: htmlContent });

Property	Description	Values
html	HTML content to be printed	`string`
fileName	Name of the file to be printed (optional)	`string`
printerUrl	URL of the printer (optional)	`string`

Note: The printAsync function is only available on physical devices and will not work in the Expo Go app.

Warning: Printing HTML content may not render correctly on all devices or printers. Ensure proper HTML structure and CSS for best results.

9. Printing to PDF

Example: Exporting a Document to PDF

import * as FileSystem from &#x27;expo-file-system&#x27;;
import { printAsync, PDFMediaType } from &#x27;expo-print&#x27;;

const htmlContent = &#x27;<html><body><h1>Hello World</h1><p>This is a test document.</p></body></html>&#x27;;

const uri = await printAsync({
  html: htmlContent,
  fileName: &#x27;document.pdf&#x27;,
  mediaType: PDFMediaType.PRINT,
});

console.log("PDF saved to:", uri);

Property	Description	Values
html	HTML content to convert to PDF	`string`
fileName	Name of the generated PDF file	`string`
mediaType	Media type for printing (e.g., PRINT or SCREEN)	`PDFMediaType.PRINT`, `PDFMediaType.SCREEN`

Note: The printAsync function is only available on mobile platforms (iOS and Android). It does not work in the Expo Go app due to platform limitations.

Warning: Ensure that the HTML content is valid and does not include external resources (e.g., images or stylesheets) that may not render correctly in the PDF.

10. Using Document Picker

Example: Pick a document

import * as DocumentPicker from 'expo-document-picker';

const result = await DocumentPicker.pickAsync({
  type: '*/*',
  copyToCacheDirectory: false,
});

if (result.cancelled) {
  console.log('User cancelled the picker');
} else {
  console.log('File URI:', result.uri);
}

Property	Description	Default
type	File type to filter by. Use `'/'` for all files.	`'/'`
copyToCacheDirectory	Whether to copy the file to the app's cache directory.	`true`
multiple	Allow selecting multiple files.	`false`

Note: On web, the type property is not supported and all files are allowed.

Warning: On iOS, the copyToCacheDirectory property is ignored and files are always copied to the cache directory.

11. Picking Documents

The @expo/document-picker module allows you to pick documents from the device's file system. It supports picking files of various types and returns metadata about the selected file.

Property	Description	Values
type	Specifies the types of files to display in the picker.	`'/'` (all files), `'.pdf'` (PDF only), `'image/*'` (images), or a custom MIME type.
copyToCacheDirectory	Whether to copy the selected file to a cache directory.	`true` or `false`
writeToCacheDirectory	Whether to write the file to a cache directory (iOS only).	`true` or `false`

Example: Pick a PDF Document

import * as DocumentPicker from &#x27;@expo/document-picker&#x27;;

const pickDocument = async () => {
  const result = await DocumentPicker.getDocumentAsync({
    type: &#x27;.pdf&#x27;,
    copyToCacheDirectory: true
  });

  if (!result.canceled) {
    console.log("File URI: ", result.assets[0].uri);
  } else {
    console.log("Document picking was cancelled");
  }
};

Note: On iOS, the file is copied to a cache directory by default if copyToCacheDirectory is set to true. On Android, the file path may not be accessible directly due to security restrictions.

12. Setting Document Filters

Filter	Description	Usage
type	Defines the type of document to filter	`'image/*'`, `'application/pdf'`
name	Human-readable name for the document filter	`'PDF Documents'`

Example: Configure Document Filters

import * as DocumentPicker from 'expo-document-picker';

const pickDocument = async () => {
  const result = await DocumentPicker.getDocumentAsync({
    type: 'application/pdf',
    copyToCacheDirectory: true,
  });
  if (result.type === 'success') {
    console.log(result.assets[0].uri);
  }
};

Note: The type property supports MIME types and wildcards for filtering documents.