How to add Copy-paste Feature in React Native Expo App

Add a copy to clipboard feature in your React Native Application

Hello, React Native Developers..!!

In mobile app development, when you are dealing with the Text Input field. You often want that the user must have the option to paste the text in the text input area. Dealing with copy-paste option is an important aspect. Like somewhere you saw a good quote and want to post it on your timeline. So, you just have to copy from there and paste it here. So, let’s make a mobile app using react native expo where you provide the copy-paste features or you can say copy from clipboard features to the user. Grab your seat and take a cup of coffee and let’s begin the hack.

Photo by Lala Azizli on Unsplash

Set-up and Installation

1. Make a directory and navigate to it.
2. Open your terminal or command prompt window and execute the command: expo init Clipboard
3. Choose the first-blank template and continue the downloads
4. After the completion of download navigate to the directory “Clipboard”
5. Install a package using the command: npm install expo-clipboard

You will see something like this after all the 5 steps. Ignore the message alert for now. We are done with the installation part, now let’s begin the code.

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Code of copy to Clipboard

Open this project in your favorite text editor and do verify the installed package in the “package.json” file. According to your convenience, you can place the copy-paste features in the other section of your project. But as a demo, we will work in the App.js file.

App.js

import * as React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Clipboard from 'expo-clipboard';
export default function App() {
  const [copiedText, setCopiedText] = React.useState('');
const fetchCopiedText = async () => {
    const text = await Clipboard.getStringAsync();
    setCopiedText(text);
  };
return (
    <View style={styles.container}>
      <Button title="Paste" onPress={fetchCopiedText} />
      <Text style={styles.copiedText}>{copiedText}</Text>
    </View>
  );
}

First, we import all the required packages. Then in the Function App() we use react hooks concept for the copying of text. Users usually copy the text remotely that’s why we used an asynchronous callback Function “fetchCopiedText”. At last, we return them in a simple format. You customize the UI part. But as for now let’s keep it simple. Just copy the text from somewhere and press the button “PASTE”. Then you will see that it will appear on the screen.
Add a little bit of styling.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  copiedText: {
    marginTop: 10,
    color: 'black',
    padding:10,
  },
});

Here we are done with our code part. Now simply run this project.
Open your terminal or command prompt window in the Clipboard folder and run the command: npm start
Open the expo app in your android as well as in IOS as this feature is supported in both IOS and Android devices. Scan the QR code appearing on the window screen and check out this feature.
For example, I just copied a quote from the internet and press the paste button of this expo app. It is showing something like this on-screen.

If you find any kind of difficulty then let me know in the comment section.

Thank you