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-App
Step 2: Run
expo start
Output: