CODEWITHSUNDEEP
react-native
parv desai
parv desai

Reputation: 397

React-Native: Error setting and getting text from ClipBoard

import React, { useState } from 'react'
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import Clipboard from '@react-native-community/clipboard'

const App = () => {
    const [copiedText, setCopiedText] = useState('')

    const copyToClipboard = () => {
        Clipboard.setString('hello world')
    }

    const fetchCopiedText = async () => {
        const text = await Clipboard.getString()
        setCopiedText(text)
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.container}>
                <TouchableOpacity onPress={() => copyToClipboard()}>
                    <Text>Click here to copy to Clipboard</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => fetchCopiedText()}>
                    <Text>View copied text</Text>
                </TouchableOpacity>

                <Text style={styles.copiedText}>{copiedText}</Text>
            </View>

        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
//styles
})

export default App

When pressing "copy to clipboard" i get an error saying null is not and object('evaluating NativeClipboard_1.default.setString') and on pressing "view copied text" i get an TypeError Unhandlded promise rejection. This code was copied directly from here: https://github.com/react-native-community/clipboard

enter image description here

Upvotes: 12

Views: 13761

Answers (7)

Irv Katz
Irv Katz

Reputation: 149

According to the Expo documentation (https://docs.expo.io/versions/v40.0.0/sdk/clipboard/), there's a Clipboard available from their API.

Install with

expo install expo-clipboard

and use with

import * as Clipboard from 'expo-clipboard';

Upvotes: 14

Mahdi Movassagh
Mahdi Movassagh

Reputation: 19

Clipboard has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/clipboard instead of 'react-native'.

you can import it from @react-native-community/clipboard :

import Clipboard from '@react-native-community/clipboard'

after installing the @react-native-community/clipboard package and importing the Clipboard from it you end up with the above-mentioned error

to fix it just re-run the npm run android again.

this solved my problem

Upvotes: 0

Mifi
Mifi

Reputation: 11

manual linking worked for me:

mobile/android/settings.gradle

include ':@react-native-community-clipboard'
project(':@react-native-community-clipboard').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/clipboard/android')

mobile/android/app/build.gradle

dependencies {
  ...
  implementation project(':@react-native-community-clipboard')
  ...
}

MainApplication.java

import com.reactnativecommunity.clipboard.ClipboardPackage;

...

@Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          ....
          packages.add(new ClipboardPackage());
          
          return packages;
        }

Upvotes: 1

Tanvi Agarwal
Tanvi Agarwal

Reputation: 156

I had the same issue, after much research could find a solution by using

import { SafeAreaView, View, Text, TouchableOpacity, Clipboard, StyleSheet } from 'react-native'

instead of separately using

import Clipboard from '@react-native-community/clipboard'

In expo @react-native-community/x packages are not used.

Upvotes: 0

ksingh
ksingh

Reputation: 163

I too had this issue, as other users have said, Clipboard from react-native-community is not compatible with Expo.

Upvotes: 9

Cory McAboy
Cory McAboy

Reputation: 332

I had the same issue. It ended up being a linking issue. I ran react-native link like the instructions asked, but I forgot to install the pod. Make sure you install pods after linking.

cd ios && pod install && cd ..

Upvotes: 5

Pramod
Pramod

Reputation: 1940

Use react clipboard

Running example: https://snack.expo.io/@msbot01/4c673f

code:

import React, { useState } from 'react'
import { SafeAreaView, View, Text, TouchableOpacity, Clipboard, StyleSheet } from 'react-native'

const App = () => {
  const [copiedText, setCopiedText] = useState('')

  const copyToClipboard = () => {
    Clipboard.setString('hello world')
  }

  const fetchCopiedText = async () => {
    const text = await Clipboard.getString() 
    setCopiedText(text)
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={() => copyToClipboard()}>
          <Text>Click here to copy to Clipboard</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{marginTop:50}} onPress={() => fetchCopiedText()}>
          <Text>Click to View copied text</Text>
        </TouchableOpacity>

        <Text style={styles.copiedText}>{copiedText}</Text>
      </View>

    </SafeAreaView>
  ) 
}

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

export default App

Upvotes: 4

Related Questions