Open In App

Clipboard App using React-Native

Last Updated : 20 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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.

final

Final Output

Prerequisites:

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:

folder

Folder 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:

Finaloutput

Final Output



Similar Reads

How to Copy Text to the Clipboard in React Native ?
Mobile app de­velopment requires enabling text copying to the clipboard for se­amless content sharing and improved use­r experience­. A popular cross-platform framework, React Native, offers a solution to this common requirement. This article will guide develope­rs through implementing clipboard functionality using the @re­act-native-clipboard/clip
3 min read
Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Approach: In this ar
2 min read
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic
2 min read
How to add a Progress Bar in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Approach: In this a
3 min read
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to create a button in react-native using react-native-paper library ?
React-native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to create Chip in react-native using react-native-paper ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to copy text to the clipboard in React.js ?
Copying text to the clipboard in React JS is a common requirement in web applications, and React.js provides an easy way to accomplish this task. In this article, we will explore different methods to copy text to the clipboard in a React.js application. Prerequisite for React JS ClipboardNPM &amp; Node JSstyled-componentsReact useState() hooksTable
4 min read
Progressive Web App - A Combination of Native and Web App
Web is a wonderful platform. Its omnipresent across devices and operating systems, its user-centered security model, and the fact that neither its specification nor its implementation is maintained by a single company or organization make the web a unique and promising platform to develop software or applications on. In addition to that with its in
9 min read
How does the Postman Agent Work? How can a Browser Web App Communicate with a Native App?
Postman is a device for API development and checking out that has a web app, a desktop app, and a browser extension. However, the net app has a few limitations because of the CORS feature of browsers, which prevents move-domain API requests. To overcome this, Postman has advanced the Postman Agent, a solution that runs domestically to your laptop a
5 min read