To create a “copy to clipboard” feature in a React Native app, you can use the `Clipboard` API provided by the `@react-native-clipboard/clipboard` package. Here’s a step-by-step guide to implementing it:
### Step 1: Install the Clipboard Package
If you haven’t already, install the clipboard package using npm or yarn:
npm install @react-native-clipboard/clipboard
or
yarn add @react-native-clipboard/clipboard
### Step 2: Import the Clipboard API
In your component file, import the `Clipboard` module:
import React from 'react'; import { View, Text, Button, Alert } from 'react-native'; import Clipboard from '@react-native-clipboard/clipboard';
### Step 3: Create a Function to Copy Text
Create a function that will handle copying the text to the clipboard:
const copyToClipboard = async (text) => { await Clipboard.setString(text); Alert.alert('Copied to Clipboard', text); };
### Step 4: Use the Function in Your Component
Now you can use this function within a component. Here’s a simple example:
const App = () => { const textToCopy = 'Hello, this is the text to copy!'; return ( {textToCopy} ); }; export default App;
### Step 5: Run Your App
Now run your app. When you press the “Copy to Clipboard” button, the specified text will be copied, and an alert will notify you that it has been copied.
### Additional Notes
– Ensure you handle permissions if needed, although copying to the clipboard generally doesn’t require additional permissions.
– You can customize the alert or provide feedback in another way, such as changing the button text temporarily.
That’s it! You now have a working “copy to clipboard” feature in your React Native app.