? Clipboard API in React Native

? Quick Overview

The Clipboard API in React Native allows apps to copy text to the system clipboard and read text from it. It is commonly used for features like copy buttons, sharing codes, OTPs, links, and debugging values.

? Key Concepts

• Clipboard works with plain text data
• Requires a separate package in modern React Native
• Supports both copy and paste operations
• Works on Android and iOS

? Syntax / Theory

React Native uses the @react-native-clipboard/clipboard package. It exposes simple methods to set and get clipboard content.

• Clipboard.setString(text) → Copy text
• Clipboard.getString() → Read text

? Code Example(s)

// Import Clipboard API from the official package
import Clipboard from '@react-native-clipboard/clipboard';

// Copy text to clipboard
Clipboard.setString('Hello React Native');

// Read text from clipboard
Clipboard.getString().then(text => {
console.log(text);
});

? Live Output / Explanation

? Interactive Example

A simple UI interaction where a button copies text and another button pastes it. Use the simulator below to test this logic in the browser.

// Simple copy-paste UI example
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

export default function App() {
const [value, setValue] = useState('');

const copyText = () => {
// Copy fixed text
Clipboard.setString('Copied from App');
};

const pasteText = async () => {
// Paste text from clipboard
const text = await Clipboard.getString();
setValue(text);
};

return (
<View>
<Button title="Copy" onPress={copyText} />
<Button title="Paste" onPress={pasteText} />
<Text>{value}</Text>
</View>
);
}

? Use Cases

• Copying referral codes
• Sharing URLs or IDs
• OTP and verification flows
• Debugging and developer tools