Clipboard App using React-Native
Last Updated :
24 Apr, 2025
Improve
In this tutorial, we will create a stylish clipboard app using React Native. The app allows users to copy text to the clipboard, paste text from the clipboard, and display a stylish popup message to indicate successful copy or paste actions.
Preview of final output: Let us have a look at how the final application will look like.
Prerequisites:
- Node JS
- Expo CLI installed globally
- Basic knowledge of React Native
Approach:
The Clipboard App will have the following functionalities:
- Copy Text to Clipboard: Users can enter text into an input field and click the "Copy" button to copy the text to the clipboard.
- Paste Text from Clipboard: Users can click the "Paste" button to paste text from the clipboard into the input field.
- Stylish Popup: After a successful copy or paste action, a stylish modal popup will appear with a relevant message.
Steps to Create the Clipboard App:
Step 1: Create a new Expo project
npx create-expo-app Clipboard-App
cd ClipboardApp
Step 2: Install dependencies
npm install react-native-modal
expo install expo-clipboard
Step 3: Create the main component
Create a new file ClipboardApp.js and define the main component with the desired functionalities.
Project Structure:
The updated dependencies in package.json file will look like :
"dependencies": {
"react-native-paper": "*",
"@expo/vector-icons": "^13.0.0",
"expo-status-bar": "~1.6.0",
"expo-contacts": "~12.2.0",
"expo-permissions": "~14.2.1",
"react-native-screens": "~3.22.0",
"react-native-contacts": "^7.0.8",
"@react-navigation/stack": "^6.3.20",
"@react-navigation/native": "6.0.0",
"react-native-permissions": "^4.0.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-safe-area-context": "4.6.3",
"expo-clipboard": "~4.3.1",
"react-native-modal": "*"
}
Example: Below is the code example for the clipboard app.
//App.js
import React from "react";
import ClipboardApp from "./ClipboardApp"; // Import the ClipboardApp component
import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
{/* Render the ClipboardApp component */}
<ClipboardApp />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
import React, { useState } from "react";
import { View, TextInput, Button, Text, StyleSheet } from "react-native";
import * as Clipboard from "expo-clipboard";
import Modal from "react-native-modal";
const ClipMeApp = () => {
const [inputText, setInputText] = useState("");
const [isModalVisible, setModalVisible] = useState(false);
const [modalMessage, setModalMessage] = useState("");
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const copyToClipboard = () => {
Clipboard.setString(inputText);
setModalMessage("Text copied to clipboard!");
toggleModal();
};
const pasteFromClipboard = async () => {
const text = await Clipboard.getStringAsync();
setInputText(text);
setModalMessage("Text pasted from clipboard!");
toggleModal();
};
return (
<View style={styles.container}>
<Text style={styles.appName}>GFG Clipboard App</Text>
<Text style={styles.appDescription}>
A simple and stylish clipboard manager
</Text>
<TextInput
style={styles.input}
placeholder="Enter your text here..."
value={inputText}
onChangeText={(text) => setInputText(text)}
/>
<View style={styles.buttonContainer}>
<Button title="Copy" onPress={copyToClipboard} />
<Button title="Paste" onPress={pasteFromClipboard} />
</View>
{/* Stylish Popup */}
<Modal
isVisible={isModalVisible}
animationIn="slideInUp"
animationOut="slideOutDown"
>
<View style={styles.modalContainer}>
<Text style={styles.modalText}>{modalMessage}</Text>
<Button
title="Okay!"
onPress={toggleModal}
style={styles.modalButton}
/>
</View>
</Modal>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 20,
backgroundColor: "white",
},
appName: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 5,
color: "#009900",
},
appDescription: {
fontSize: 16,
color: "#666",
marginBottom: 20,
textAlign: "center",
},
input: {
width: "100%",
height: 40,
borderColor: "#ccc",
borderWidth: 1,
marginBottom: 20,
padding: 10,
borderRadius: 8,
backgroundColor: "white",
},
buttonContainer: {
flexDirection: "row",
justifyContent: "center",
width: "30%",
gap: 40,
},
modalContainer: {
backgroundColor: "white",
padding: 20,
borderRadius: 10,
alignItems: "center",
},
modalText: {
fontSize: 18,
marginBottom: 20,
textAlign: "center",
},
modalButton: {
marginTop: 10,
backgroundColor: "#4285f4",
},
});
export default ClipMeApp;
Steps to Run the Application:
Step 1: Navigate to the project directory.
cd Clipboard-AppStep 2: Run
expo startOutput:
