Mobile app development requires enabling text copying to the clipboard for seamless content sharing and improved user experience. A popular cross-platform framework, React Native, offers a solution to this common requirement. This article will guide developers through implementing clipboard functionality using the @react-native-clipboard/clipboard package. By handling text input, utilizing the Clipboard API, and providing user feedback, users can effortlessly copy and share text within or across applications. Enhancing usability and empowering users to interact efficiently with content in React Native apps only requires a few lines of code.
Prerequisites:
- Introduction to React Native
- React Native Components
- Expo CLI
- Node.js and npm (Node Package Manager)
Steps to Create React Native Application:
Step 1: Create React Native Application With Expo CLI
Using Expo CLI, run the following command to create a new React native application:
npx create-expo-app ClipboardApp
Step 2: Navigate to the project directory by using this command:
cd ClipboardApp
Project Structure:
Approach:
- Firstly, a React Native project is set up with all the necessary dependencies, including the `@react-native-clipboard/clipboard` package.
- Then, a screen is created featuring an input field for capturing the text and a “Copy” button to initiate the copying process.
- Upon pressing the button, the `Clipboard.setString()` method is called to store the text in the clipboard. To provide user feedback based on their platform (iOS/Android), either `ToastAndroid` or `Alert` components are utilized.
Example: In this example, we will see copy text to the clipboard in React Native.
- App.js
import React, { useState } from 'react' ;
import { View,
Text,
TextInput,
TouchableOpacity,
Clipboard,
ToastAndroid, // For Android-specific toast message
AlertIOS, // For iOS-specific alert message
Platform // To handle cross-platform differences
} from 'react-native' ;
const App = () => { const [copyText, setCopyText] = useState( '' );
const [copied, setCopied] = useState( false );
const handleCopyText = (text) => {
setCopyText(text);
setCopied( false );
};
const copyToClipboard = () => {
if (copyText) {
Clipboard.setString(copyText);
// Display a success message
if (Platform.OS === 'android' ) {
ToastAndroid.show( 'Text copied to clipboard!' ,
ToastAndroid.SHORT);
} else if (Platform.OS === 'ios' ) {
AlertIOS.alert( 'Text copied to clipboard!' );
}
setCopied( true );
}
};
const containerStyle = {
flex: 1,
alignItems: 'center' ,
justifyContent: 'center' ,
marginTop: 40,
};
const headingStyle = {
fontSize: 32,
fontWeight: 'bold' ,
marginBottom: 20,
};
const inputStyle = {
padding: 10,
marginBottom: 20,
borderWidth: 2,
borderColor: 'green' ,
borderRadius: 4,
width: 300,
fontSize: 16,
margin: 10,
};
const buttonStyle = {
backgroundColor: 'green' ,
color: 'white' ,
padding: 10,
borderRadius: 4,
fontSize: 16,
};
const successMessageStyle = {
color: 'green' ,
marginTop: 10,
};
return (
<View style={containerStyle}>
<Text style={headingStyle}>
Copy Text to Clipboard
</Text>
<TextInput
value={copyText}
onChangeText={handleCopyText}
style={inputStyle}
placeholder= "Enter the text you want to copy"
/>
<TouchableOpacity onPress={copyToClipboard}
style={buttonStyle}>
<Text style={{ color: 'white' }}>
Copy
</Text>
</TouchableOpacity>
{copied &&
<Text style={successMessageStyle}>
Text copied to clipboard!
</Text>}
<TextInput
style={inputStyle}
placeholder= "Enter the copied text"
/>
</View>
);
}; export default App;
|
Step 4: To run the React Native application, open the Terminal or Command Prompt and type the following command:
npx expo start
To run on Android:
npx react-native run-android
To run on Ios:
npx react-native run-ios
Output: