Clipboard

Clipboard

React Native 36,878 once had a core Clipboard API; it moved out of core years ago, and today you use expo-clipboard (or the community's @react-native-clipboard/clipboard outside Expo 6,418 ). Its asynchronous API covers text (setStringAsync(), getStringAsync(), hasStringAsync()), images (setImageAsync(), getImageAsync()) and change events (addClipboardListener()):

src/interact/ClipDemo.tsx: copying a discount code and reading it back (excerpt)TSX

  useEffect(() => {
    const sub = Clipboard.addClipboardListener(({ contentTypes }) =>
      console.log('clipboard changed:', contentTypes.join(', ')));
    return () => sub.remove();
  }, []);
  const copy = async () => {
    const ok = await Clipboard.setStringAsync(CODE);
    console.log('copied:', ok, '| has text:', await Clipboard.hasStringAsync());
  };
  const paste = async () => {
    const text = await Clipboard.getStringAsync();
    console.log('pasted:', JSON.stringify(text));
    setPasted(text);
  };

Pressing Copy, then Paste:

Output of 117

 ReactNativeJS: 'clipboard changed:', 'plain-text'
 ReactNativeJS: 'copied:', true, '| has text:', true
 ReactNativeJS: 'pasted:', '"BOOKNEST-READ10"'

The platforms now police the clipboard. Since Android 13 the system shows its own confirmation with a preview of the copied text (the right-hand screen in Alert's figure), so an app should not add a "Copied" toast of its own there; Android 12 and later show a "pasted from your clipboard" toast when an app reads what another app copied; and on iOS 16 and later, reading the clipboard asks the user's permission, and a refusal returns an empty result. Read the clipboard only in response to a user action, and mark secrets as sensitive (Android's EXTRA_IS_SENSITIVE flag) so that the preview hides them.

MENU