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.

Final Output

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:

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:

Final Output