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
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';
I too had this issue, as other users have said, Clipboard from react-native-community is not compatible with Expo.
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 ..
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
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;
}
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.
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
Related
I followed all instructions to install #tensorflow/tfjs-react-native given at
https://www.npmjs.com/package/#tensorflow/tfjs-react-native/v/0.3.0
this is my app.js file:
import React, { useState, useEffect } from 'react';
import * as tf from '#tensorflow/tfjs';
import '#tensorflow/tfjs-react-native';
import {
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';
export default () => {
const [ready, setReady] = useState(false)
useEffect(() => {
const load = async () => {
await tf.ready()
setReady(true)
}
load()
})
return (
<SafeAreaView style={{ backgroundColor: '#fff', flex: 1 }}>
<StatusBar barStyle={'dark-content'} />
<View>
<Text>hello</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
});
App crashes when tf.ready() is called. no error is logged in console.
If i comment tf.ready() everything works fine. am i doing something wrong?
This is my package.json file
image of package.json file
How do i test if this package is installed correctly?
any help from your side will be appreciated.
I had this issue when running my app with expo on an android device, what solved it for me was setting the backend with :
await tf.setBackend('cpu');
before
tf.ready();
It might solve your problem as well
I get this error after using React-native-markdown-display package and I don't understand why...
I have only strings in my content database, so it seem's to be something else.
This is the full error:
folow the link to see the error
And my code bellow :
//Libraries
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import React, { useState } from 'react';
import Colors from '../constants/Colors';
import GoBackButton from '../components/GoBackButton';
import { useEffect } from 'react';
import Markdown from 'react-native-markdown-display';
const PostsDetails = ({ navigation, route }) => {
const [post, setPost] = useState({});
const [services, setServices] = useState([]);
useEffect(() => {
let { selectedPost } = route.params;
setPost(selectedPost);
setServices(selectedPost.services);
}, []);
console.log(services);
return (
<View style={styles.container}>
<SafeAreaView style={{ flex: 1 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<GoBackButton onPress={() => navigation.goBack()} />
<Text>{post.title}</Text>
<Text>{post.region}</Text>
<Text>{post.category}</Text>
<Text>{post.id}</Text>
<Markdown>{post.content}</Markdown>
<Text>{post.itinerary}</Text>
<Text>{post.lat}</Text>
<Text>{post.lon}</Text>
<Text>{post.price}</Text>
<Text>{post.link}</Text>
{services.map((service, index) => {
return <Text key={index}>{service.attributes.name}</Text>;
})}
</ScrollView>
</SafeAreaView>
</View>
);
};
export default PostsDetails;
I didn't find any similar error in stackOverflow.
Thanks
I was using Docusaurus when I encountered this error using markdown-it. The issue was that Docusaurus has built-in MDX support and the module was picking up my markdown files, processed them to JDX before they were loaded into my code and that is when the type error occured. I resolved this by simply storing my markdown in .txt files, so the module ignores them and they can be loaded as simple strings.
I'm just trying to make a ReactNative app that will display a simple webpage. But all I can see is a blank screen in my browser (Google) and my Expo Go says Network response timed out. Could somebody help me out, please?
I have given my code below:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import {WebView} from 'react-native-webview';
export default function App() {
const GOOGLE = "https://www.google.com/"
return (
<View style={styles.container}>
<View>
<WebView
source = {{uri : GOOGLE}}
/>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Blank screen image...
I have done npm install react-native-webview
you cant npm install react-native-webview because it has native dependencies.
You need to install it through expo by going
expo install react-native-webview
you can read this for more
https://docs.expo.dev/versions/latest/sdk/webview/
Im very new to react-native and expo.
I can't solve this problem myself.
My previous code was this.
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import firebase from 'firebase';
export default class Home extends React.Component {
handleSignOut = () => {
firebase
.auth()
.signOut()
.then(result => alert('sign out success'))
.catch(error => console.error(error));
};
render() {
return (
<View style={styles.container}>
<Text>Main</Text>
<TouchableOpacity onPress={this.handleSignOut}>
<Text>Sign Out</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Then I just changed the text 'Main' to 'Home' and saved.
After that expo client was reloaded but nothing changed :(
I would appreciate it if you could give me any advices!
Not sure which version of Expo you're using (expo --version), but I spun off a quick Expo project, copy pasted your code (minus the Firebase parts) and it works seamlessly.
Maybe try closing and reopening your emulator/simulator.
I get this error and it's driving me insane, I cannot even start a simple application on React Native. I am using the most basic example, with a fresh project and still throws this error.
I use react-navigation v3xx
Someone please help because I am losing my mind, thank you.
Here is the code I have:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
class Home extends React.Component {
static navigationOptions = {
title: "Home",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.navigate('About')} title="All about me" />
</View>
);
}
}
class AboutMeMe extends React.Component {
static navigationOptions = {
title: "All Me",
}
render() {
return (
<View style={styles.container}>
<Text>Home Page</Text>
<Button onPress={() => this.props.navigation.goBack()} title="<< Back" />
</View>
);
}
}
const AppScreens = createStackNavigator({
Home: Home,
About: AboutMeMe
})
const App = createAppContainer(AppScreens);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
Hellow
As react navigation now depends on gesture so you must install an additional library to go after you have installed the react-navigation library
Run this command inside your project from your terminal
npm install --save react-native-gesture-handler
Then run this one
react-native link react-native-gesture-handler
These instructions are well explained here
https://reactnavigation.org/docs/en/getting-started.html#installation
for new react navigation version
Best regards
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler