Sharing and clipboard in React Native

Introduction

Sharing lets users send text or files from your app to other apps. Clipboard lets users copy and paste text easily.

When you want users to share a message or link with friends via other apps.

When users need to copy text from your app to paste somewhere else.

When you want to let users paste text into your app from other apps.

When you want to share images or files from your app to social media or email.

When you want to provide a quick way to copy a code or URL for later use.

Syntax

React Native

import { Share } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

// To share text
Share.share({ message: 'Hello from my app!' });

// To copy text to clipboard
Clipboard.setString('Text to copy');

// To get text from clipboard
const text = await Clipboard.getString();

Use Share.share() to open the system share dialog.

Use Clipboard.setString() to copy text, and Clipboard.getString() to read text.

Examples

This opens the share dialog with the message to share.

React Native

Share.share({ message: 'Check out this cool app!' });

This copies the text so the user can paste it elsewhere.

React Native

Clipboard.setString('Copy this text');

This reads the current text from the clipboard and logs it.

React Native

const copiedText = await Clipboard.getString();
console.log(copiedText);

Sample App

This app shows two buttons. One opens the share dialog with a message. The other copies text to the clipboard and shows an alert.

React Native

import React from 'react';
import { View, Button, Alert } from 'react-native';
import { Share } from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

export default function App() {
  const shareMessage = () => {
    Share.share({ message: 'Hello from React Native!' });
  };

  const copyToClipboard = () => {
    Clipboard.setString('This text is copied!');
    Alert.alert('Copied!', 'Text has been copied to clipboard.');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Share Message" onPress={shareMessage} />
      <View style={{ height: 20 }} />
      <Button title="Copy Text" onPress={copyToClipboard} />
    </View>
  );
}

Important Notes

Clipboard API only works with text, not images or files.

Sharing can include URLs, text, and sometimes files depending on platform support.

Always test sharing on both Android and iOS as behavior can differ slightly.

Summary

Sharing lets users send content from your app to others easily.

Clipboard lets users copy and paste text between apps.

React Native provides simple APIs to use both features.