Clipboard App using React-Native

//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
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;