Clipboard App using React-Native
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.
Javascript
//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" , }, }); |
Javascript
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-App
Step 2: Run
expo start
Output: