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.
Related
I want to make an app that shows the URL I passes. I tried react native web view and it got some issues while deep linking and others. I found expo webbrowser and I find that solves my problem.
The code I tried is the following
import React, { useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';
export default function App() {
const [result, setResult] = useState(null);
const _handlePressButtonAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://expo.io');
setResult(result);
};
return (
<View style={styles.container}>
<Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
<Text>{result && JSON.stringify(result)}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
It's the demo code from the expo webbrowser site. I want to remove the address bar on the top and launch the website without clicking the button. The following code didn't work
let result = await WebBrowser.openBrowserAsync('https://expo.io',{showTitle:false});
....
return (_handlePressButtonAsync);
Expo Webbrowser
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
I am new to React Native.
I am using Android Emulator from Android Studio, and I did not change anything at all from any .json file... Whenever the emulator is running it's always a blank screen... It does not display any single error by the way...
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Just press R two times... that simple, yes...
I'm using Expo React Native to develop a mobile application with the help of Redux, as well as React-Redux. With the React-Redux v6.0, I can connect the components with no issues, but I cannot get the state from the store with v6.0, although with Logger Middleware, my state is already updated. I cannot use it after extract it with mapStateToProps. So I decided to update React-Redux to v7.0 with the hope that the issues will be solved but I met a new one (Image below).
Issue Screen
This is my App.js
import React from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import store from './src/redux/configureStore';
import LocationShow from './src/components/LocationShow';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<LocationShow />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my LocationShow.js
import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import {Location, Permissions, Constants} from 'expo';
import {connect} from 'react-redux';
import {Platform} from 'expo-core';
import * as locationActions from '../redux/actions/locationActions';
class LocationShow extends React.Component {
componentDidMount = async () =>{
if (Platform.OS === 'android' && !Constants.isDevice){
console.log('Switch to the real device dawg!')
}else{
await this.props.getCurrentLocation();
}
}
render(){
return(
<View>
{this.props.isLoading ?
<ActivityIndicator/>:
<View>
<Text>Latitude:{this.props.latitude}</Text>
<Text>Longitude:{this.props.longitude}</Text>
</View>
}
</View>
)
}
}
const mapStateToProps = (state) =>{
return{
latitude: state.latitude,
longitude: state.longitude,
error: state.error,
isLoading: state.isLoading
}
}
const mapDispatchToProps = (dispatch) =>{
return {
getCurrentLocation: () =>
dispatch(locationActions.getCurrentLocation())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LocationShow);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
I read the changes of v7.0 with the connect() but Im quite new to React so I cannot get the idea of it.
Note: connect now uses React.memo() internally, which returns a special object rather than a function. Any code that assumed React components are only functions is wrong, and has been wrong since the release of React 16.6. If you were using PropTypes to check for valid component types, you should change from PropTypes.func to PropTypes.elementType instead.
Im running React:v16.8.6, React-Native:0.57.1, React-Redux: v7.0.2, Redux:v4.0.1
Hope someone can help me out, sorry if the code is too bad, as I said above, I'm quite new to React Native and Redux or other stuff.
Thank you!
After considering, I decied to go back to version 6.0.1 of react-redux. Now everything works like a champ. This thread can be closed right now.
By the way, the problem exactly comes from the new connect(), cause the react-redux team uses React.memo() and Hooks. But I still do not understand why it is the problem so if anyone has an idea about the changes of version 7.0.2 with the new connect(), feel free to explain.
Thank you guys!
I am building an app for iOS with React native and I would like to know how to take a snapshot of a given screen. I have found this library but I don't know how to use it. Does anyone know how to ?
EDIT:
I used the following code to capture a screen using the library but I get the given error.
try {
captureRef(viewRef, {
format: "jpg",
quality: 0.8
})
.then(
uri => console.log("Image saved to", uri),
error => console.error("Oops, snapshot failed", error)
);
} catch (e) {
console.log(e);
}
The error
ReferenceError: viewRef is not defined
Does anybody know how to fix the error?
Thank you
Sure, but you have to read a little about what a ref is. If you are already using React hooks, check this: https://es.reactjs.org/docs/hooks-reference.html#useref
(if not, just search on how to create a ref in React with createRef)
Basically, a ref is something that will let you identify your component using the same variable even if the component re-renders. So, viewRef in your example should be a reference to a given element. Like:
import React, { useRef } from "react";
function MyComponent() {
const viewRef = useRef();
return <View ref={viewRef}>content</View>
}
So, your draft could be something like:
import React, { useRef } from "react";
import {Button, View, Text} from 'react-native';
import { captureRef } from "react-native-view-shot";
function useCapture() {
const captureViewRef = useRef();
function onCapture() {
captureRef(captureViewRef, {
format: "jpg",
quality: 0.9
}).then(
uri => alert(uri),
error => alert("Oops, snapshot failed", error));
}
return {
captureViewRef,
onCapture
};
}
function MyComponent() {
const { captureViewRef, onCapture } = useCapture();
return (
<>
<View ref={captureViewRef}><Text>content</Text></View>
<Button title="Save" onPress={onCapture} />
</>
);
}
As far as I know, this only generates a temporary file. If you want to see the capture saved into your device, you should use CameraRoll https://facebook.github.io/react-native/docs/cameraroll
I won't cover how to use it here, but it would be something like:
CameraRoll.saveToCameraRoll(uri); // uri being the path that you get from captureRef method
Just notice that your app must ask for proper permission before attempting to save to the device gallery.
hi this can be with the help of react-native-view-shot
this is my parent component
import React, {Component,useRef} from 'react';
import {Platform, StyleSheet, Text, View,Image,Button} from 'react-native';
import { captureRef, captureScreen ,ViewShot} from "react-native-view-shot";
import NewVd from './NewVd';
import Newved from './Newved';
export default class App extends Component {
constructor(){
super();
this.state={
item:null,
captureProcessisReady:false,
myView:false
};
this.func=this.func.bind(this);
}
componentDidMount(){
}
result1=()=>{
console.log("i am here ");
this.setState({captureProcessisReady:true});
}
func = (uri) => {
console.log('ADD item quantity with id: ', uri);
this.setState({item:uri,myView:true});
};
render() {
return (
<View style={styles.container}>
{/* <NewVd
func={this.func}/> */}
<Newved />
<Text>...Something to rasterize...</Text>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Button onPress={()=>this.result1()} title="press Me"/>
<View>
{this.state.captureProcessisReady?( <NewVd func={this.func}/>):null}
</View>
<View>
{this.state.myView?( <Image source={{uri:this.state.item !== null?`${this.state.item}`:'https://picsum.photos/200'}} style={{width:100,height:100}} />):null}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
this is my child component
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ViewShot from "react-native-view-shot";
class NewVd extends Component {
constructor(props){
super(props);
}
onCapture = uri => {
console.log("do something with ", uri);
this.props.func(uri); //for the parent using callback
}
render() {
return (
<ViewShot onCapture={this.onCapture} captureMode="mount">
<Text>...Something to rasterize...</Text>
</ViewShot>
);
}
}
export default NewVd;