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 pop-up message to indicate successful copy or paste actions.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Playground

Note: This Section is to interact with the app which you are going to build.

Prerequisites

Node JS
Expo CLI is 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.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Example: Below is the code example for the clipboard app.

App.js

//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",
    },
});

ClipboardApp.js

// ClipboardApp.js
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;