Sharing and clipboard in React Native - Mini App: Build & Ship

Build: Share and Clipboard Demo

This screen lets users enter text, copy it to the clipboard, and share it using the device's share options.

Target UI

-------------------------
| Share and Clipboard    |
|-----------------------|
| [ Text Input          ]|
|                       |
| [ Copy to Clipboard ]  |
| [ Share Text        ]  |
-------------------------

A TextInput for user to type text

A button labeled 'Copy to Clipboard' that copies the input text to clipboard

A button labeled 'Share Text' that opens the device share dialog with the input text

Show a simple alert or message confirming the text was copied

Starter Code

React Native

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

export default function ShareClipboardScreen() {
  const [text, setText] = useState('');

  // TODO: Add copyToClipboard function

  // TODO: Add shareText function

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type something here"
        value={text}
        onChangeText={setText}
        accessibilityLabel="Text input for sharing and clipboard"
      />
      <Button title="Copy to Clipboard" onPress={() => {}} />
      <Button title="Share Text" onPress={() => {}} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  input: {
    borderColor: '#888',
    borderWidth: 1,
    padding: 12,
    marginBottom: 12,
    borderRadius: 4
  }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function ShareClipboardScreen() {
  const [text, setText] = useState('');

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

  const shareText = async () => {
    try {
      await Share.open({
        message: text
      });
    } catch (error) {
      // User cancelled or error
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type something here"
        value={text}
        onChangeText={setText}
        accessibilityLabel="Text input for sharing and clipboard"
      />
      <Button title="Copy to Clipboard" onPress={copyToClipboard} />
      <Button title="Share Text" onPress={shareText} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  input: {
    borderColor: '#888',
    borderWidth: 1,
    padding: 12,
    marginBottom: 12,
    borderRadius: 4
  }
});

We use React Native's useState to keep track of the text input by the user. The copyToClipboard function uses the Clipboard.setString method to copy the current text to the device clipboard and then shows a simple alert to confirm the action.

The shareText function uses the react-native-share library to open the device's native share dialog with the text message. We handle errors silently, such as when the user cancels sharing.

Both functions are connected to their respective buttons' onPress handlers. The UI is simple and accessible, with labels and clear buttons.

Final Result

Completed Screen

-------------------------
| Share and Clipboard    |
|-----------------------|
| [ Type something here ]|
|                       |
| [ Copy to Clipboard ]  |
| [ Share Text        ]  |
-------------------------

User types text in the input field

Tapping 'Copy to Clipboard' copies the text and shows an alert 'Copied! Text copied to clipboard.'

Tapping 'Share Text' opens the device's share dialog with the typed text

Stretch Goal

Add a button that pastes text from the clipboard into the input field

💡 Hint

Use Clipboard.getString() to read clipboard content and update the text state