Example of React Native Community Clipboard NPM Package

Hello friends, In today’s tutorial we would learn about a copy paste to clipboard package in react native. The package name is react native community clipboard. The best thing of this package is that it can make copy and paste easy in react native application. We can easily store the copied text and paste it anywhere in our application. So in this tutorial we would learn about Example of React Native Community Clipboard NPM Package.

Contents in this project Example of React Native Community Clipboard NPM Package :-

1. First of all we have to install the react-native-clipboard/clipboard package in our react native project. I’m using NPM command to install the package. So open your project’s root directory in CMD or Terminal and execute below command.

<br />
npm install –save @react-native-clipboard/clipboard

1	npm install —save @react–native–clipboard/clipboard

Screenshot :-

2. Now open your project’s main App.js file and import useState, SafeAreaView, Text, TextInput, StyleSheet and Alert component.

<br />
import React, { useState } from ‘react’;</p>
<p>import { SafeAreaView, Text, TextInput, StyleSheet, Alert } from ‘react-native’;

import React, { useState } from ‘react’;

import { SafeAreaView, Text, TextInput, StyleSheet, Alert } from ‘react-native’;

3. Importing Clipboard from @react-native-community/clipboard package.

<br />
import Clipboard from ‘@react-native-community/clipboard’;

1	import Clipboard from ‘@react-native-community/clipboard’;

4. Creating our main App component.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

5. Creating a State named as text with State update method setText with default Text. We would use this state to show some text on the app screen.

<br />
const [text, setText] = useState(‘This is some sample Text to copy in React Native. Long Press on Text to COPY.’);

1	const [text, setText] = useState(‘This is some sample Text to copy in React Native. Long Press on Text to COPY.’);

6. Creating another State named as newText with setNewText state update method. We would use this State to show HINT in Text Input component. We would also use this state to update Text Input value.

<br />
  const [newText, setNewText] = useState(‘Paste Text Here….’);

1	const [newText, setNewText] = useState(‘Paste Text Here….’);

7. Creating a function named as copyToClipboard(). In this function we would simply copy the text.

<br />
  const copyToClipboard = () => {<br />
    Clipboard.setString(text);<br />
    Alert.alert(‘Text Copied Successfully…’);<br />
  };

const copyToClipboard = () => {

Clipboard.setString(text);

Alert.alert(‘Text Copied Successfully…’);

};

8. Creating another function named as fetchCopiedText(). In this function we would access the copied text and set the text into State. This would make the text paste inside the text input component.

<br />
  const fetchCopiedText = async () => {<br />
    const temp = await Clipboard.getString();<br />
    setNewText(temp);<br />
    console.log(temp);<br />
  };

const fetchCopiedText = async () => {

const temp = await Clipboard.getString();

setNewText(temp);

console.log(temp);

};

9. Creating return() block. Now here we would make 1 Text and 1 TextInput component.

<br />
  return (<br />
    <SafeAreaView style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.text}<br />
        onLongPress={copyToClipboard}><br />
        {text}<br />
      </Text></p>
<p>      <TextInput<br />
        placeholder= {newText}<br />
        underlineColorAndroid=’transparent’<br />
        style={styleSheet.textInput}<br />
        onLongPress={fetchCopiedText}<br />
      /></p>
<p>    </SafeAreaView><br />
  );

return (

<Text style={styleSheet.text}

onLongPress={copyToClipboard}>

{text}

</Text>

<TextInput

placeholder= {newText}

underlineColorAndroid=‘transparent’

style={styleSheet.textInput}

onLongPress={fetchCopiedText}

</SafeAreaView>

);

10. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘white’<br />
  },</p>
<p>  text: {<br />
    fontSize: 25,<br />
    textAlign: ‘center’,<br />
    color: ‘black’,<br />
    padding: 10<br />
  },</p>
<p>  textInput: {<br />
    textAlign: ‘center’,<br />
    height: 50,<br />
    width: ‘90%’,<br />
    borderWidth: 1,<br />
    borderColor: ‘red’,<br />
    borderRadius: 7,<br />
  }</p>
<p>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: ‘center’,

backgroundColor: ‘white’

text: {

fontSize: 25,

textAlign: ‘center’,

color: ‘black’,

padding: 10

textInput: {

textAlign: ‘center’,

height: 50,

width: ‘90%’,

borderWidth: 1,

borderColor: ‘red’,

borderRadius: 7,

}

});

11. Complete Source Code for App.js file :-

<br />
import React, { useState } from ‘react’;</p>
<p>import { SafeAreaView, Text, TextInput, StyleSheet, Alert } from ‘react-native’;</p>
<p>import Clipboard from ‘@react-native-community/clipboard’;</p>
<p>export default function App() {</p>
<p>  const [text, setText] = useState(‘This is some sample Text to copy in React Native. Long Press on Text to COPY.’);</p>
<p>  const [newText, setNewText] = useState(‘Paste Text Here….’);</p>
<p>  const copyToClipboard = () => {<br />
    Clipboard.setString(text);<br />
    Alert.alert(‘Text Copied Successfully…’);<br />
  };</p>
<p>  const fetchCopiedText = async () => {<br />
    const temp = await Clipboard.getString();<br />
    setNewText(temp);<br />
    console.log(temp);<br />
  };</p>
<p>  return (<br />
    <SafeAreaView style={styleSheet.MainContainer}></p>
<p>      <Text style={styleSheet.text}<br />
        onLongPress={copyToClipboard}><br />
        {text}<br />
      </Text></p>
<p>      <TextInput<br />
        placeholder= {newText}<br />
        underlineColorAndroid=’transparent’<br />
        style={styleSheet.textInput}<br />
        onLongPress={fetchCopiedText}<br />
      /></p>
<p>    </SafeAreaView><br />
  );<br />
};</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘white’<br />
  },</p>
<p>  text: {<br />
    fontSize: 25,<br />
    textAlign: ‘center’,<br />
    color: ‘black’,<br />
    padding: 10<br />
  },</p>
<p>  textInput: {<br />
    textAlign: ‘center’,<br />
    height: 50,<br />
    width: ‘90%’,<br />
    borderWidth: 1,<br />
    borderColor: ‘red’,<br />
    borderRadius: 7,<br />
  }</p>
<p>});

import React, { useState } from ‘react’;

import { SafeAreaView, Text, TextInput, StyleSheet, Alert } from ‘react-native’;

import Clipboard from ‘@react-native-community/clipboard’;

export default function App() {

const [text, setText] = useState(‘This is some sample Text to copy in React Native. Long Press on Text to COPY.’);

const [newText, setNewText] = useState(‘Paste Text Here….’);

const copyToClipboard = () => {

Clipboard.setString(text);

Alert.alert(‘Text Copied Successfully…’);

};

const fetchCopiedText = async () => {

const temp = await Clipboard.getString();

setNewText(temp);

console.log(temp);

};

return (

<Text style={styleSheet.text}

onLongPress={copyToClipboard}>

{text}

</Text>

<TextInput

placeholder= {newText}

underlineColorAndroid=‘transparent’

style={styleSheet.textInput}

onLongPress={fetchCopiedText}

</SafeAreaView>

);

};

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

alignItems: ‘center’,

backgroundColor: ‘white’

text: {

fontSize: 25,

textAlign: ‘center’,

color: ‘black’,

padding: 10

textInput: {

textAlign: ‘center’,

height: 50,

width: ‘90%’,

borderWidth: 1,

borderColor: ‘red’,

borderRadius: 7,

}

});

Screenshots:-

Example of React Native Community Clipboard NPM Package

Contents in this project Example of React Native Community Clipboard NPM Package :-

Also Read :

Recent Posts

Search Here