Im using react-native-qrcode-scanner from https://github.com/moaazsidat/react-native-qrcode-scanner and I read perfectly the code but when I go back to qr-scanner again it crashes.
I think it is because the camera is still working on background, there is a way to close it when it ends?
I believe you are having the same issue as this one on that github page.
And would recommend using that page to submit your problems regarding that software.
The following solution worked for navigation between Camera screen and others:
In Constructor:
this.state = {
focusedScreen: true
};
In render:
render() {
const { focusedScreen } = this.state;
if (!focusedScreen){
return <View />;
} else
{
return (
<QRCodeScanner ............
)
}
<QRCodeScanner
onRead={this.onSuccess.bind(this)}// change {this.onSuccess} to {this.onSuccess.bind(this)}
topContent={
<Text style={styles.centerText}>
Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
</Text>
}
bottomContent={
<TouchableOpacity style={styles.buttonTouchable}>
<Text style={styles.buttonText}>OK. Got it!</Text>
</TouchableOpacity>
}
/>
Related
i'm handling firebase auth errors and i cant show error message on screen
here is my code;
if (error.code === "auth/user-not-found") {
return (
<View>
<Text>user not found</Text>
<Text>try create a account or check ur mail and passwrd</Text>
</View>
)
}
but i use alert it works perfectly.
how can i solve it ?
Try to add some styles in your components so you can see something.
if (error.code === "auth/user-not-found") {
return (
<View style={{flex: 1, width: "100%", height: "100%", backgroundColor: "#f00"}}>
<Text>user not found</Text>
<Text>try create a account or check ur mail and passwrd</Text>
</View>
)
}
I like to try first with full width and height, and with a very basic color (in this case red) so I can watch whats happening in my views. Remember that you can save and metro gonna refresh your app in your emulator/phone.
So I'm using this custom component progress steps from this github library:
https://github.com/colbymillerdev/react-native-progress-steps/tree/master and my code looks like this:
<View style={styles.container}>
<ProgressSteps >
<ProgressStep label="authentication " nextBtnDisabled={true} >
<Authentication />
</ProgressStep>
<ProgressStep label="Confirmation">
<View style={{ alignItems: 'center' }}>
<Text>good job !</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
so there is only two screen, the first where you enter your user name and password,in this step i called a fetch api, so if the infos are correct it should lead you to the next step of confirmation.
and that's what i'm trying to do. the code of (Authentication/) is:
.....
<Button style={styles} color='#FFC617' title='log in' onPress={this.Autho} />
........
Autho = () => {
console.log(this.state)
fetch(....)
.then((response) => response.json())
.then((res) => {
if ("user_context" in res) {
AsyncStorage.setItem('user',res.user);
*what should i write here*
}
else {
alert("Error");
}
})
.done();
}
this is the method rendered every time you click the connect button log in i already tested it and it works fine but i want it to lead me to the next step.
as you can see i had nextBtnDisabled={true} so you can't go to the next step without login in.
i hope i detailed enough for you to understand and i really appreciate your response.thank you!
I am working on a page that basically is supposed to process some back end work and then push on another screen.
This Page should have some text appearing as soon as the page renders that says "submitting your info" then do the backend call, and then the text disappears, and then the whole page performs a push for another screen.
I am confused how to do that !!
This is the render part of the page
render(){
return(
<View style={styles.container}>
<Image style={styles.container} resizeMode="cover" source=
{require('/workingonit.png')}>
<View style={styles.backdropView}>
<Text style={styles.headline}>Submitting your info</Text>
</View>
</Image>
</View>
)
}
I know its something to do with settimeout? or interval?
Sorry I am new to JS and react native .
This example will toggle (hide/show) the text every time you click on the TouchableOpacity by updating the state. You can then, add whatever logic you want as a callback when the state gets updated.
import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
export default class DummyPage extends React.Component {
state = {
isTextVisible: false
}
toggleText() {
this.setState({isTextVisible: !this.state.isTextVisible}, () => {
// do some logic here
})
}
renderText() {
if (this.state.isTextVisible) {
return(
<Text>this is a random text</Text>
)
}
}
render() {
return(
<View style={{flex: 1}}>
<TouchableOpacity onPress={this.toggleText}>
<Text>Show Text</Text>
</TouchableOpacity>
{this.renderText()}
</View>
)
}
}
This should work for your API call too. Instead of updating the state with onPress, you can do it when the communication with the backend starts and hide it again when you want to push the user to another screen.
I'm using RN0.24 and flux3.26. RN version may be out-dated but the Actions.xxx works fine when I'm using onPress={Actions.xxx}
However once I put it into functions like onPress={this.function} and in function i do
function(event){ Actions.xxx; } then it's not working
can anyone help with this?
This is a this issue, I think you can try:
render() {
const login = () => { Action.login() }
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={ login }>
Go to Login
</Text>
</View>
);
}
}
Hope this can he helpful.
I'm using the https://github.com/lwansbrough/react-native-camera library in a view that is contained inside a simple <Navigator /> component.
Everything works as expected until you navigate back the Home view and try to reload the View with the <Camera />. There are no error messages in the console OR in Xcode which makes this extremely hard to pinpoint the problem.
When I delete the entire <Camera /> component, the navigation works as expected and the view reloads fine.
There is currently an open issue on github https://github.com/lwansbrough/react-native-camera/issues/80 but as time is of the essence, I am wondering if anyone else has found a solution to this problem and can share a fix.
standard render method:
render() {
return (
<View style={styles.outer}>
<Overlay
modalVisible={this.state.modalVisible}
/>
<Camera
ref="cam"
style={styles.container}
captureTarget={Camera.constants.CaptureTarget.disk}
type={this.state.cameraType}>
<TouchableHighlight style={styles.circlebutton} onPress={this._takePicture}>
<Text>Take Picture</Text>
</TouchableHighlight>
</Camera>
<Image
source={{uri: this.state.imageURI, isStatic:true}}
style={{width: this.state.imageURI ? 100 : 0, height: this.state.imageURI ? 100 : 0, opacity: this.state.imageURI ? 1 : 0}}
/>
</View>
);
}
Try this:
On Xcode, Go to RCTCamera.xcodeproj (This is one of the react native libraries)
In RCTCameraManager.h
Add the property
#property (nonatomic, strong) RCTCamera *camera;
In RCTCameraManager.m
- (UIView *)view
{
return [[RCTCamera alloc] initWithManager:self bridge:self.bridge];
}
Replace With:
- (UIView *)view
{
if(!self.camera){
self.camera = [[RCTCamera alloc] initWithManager:self bridge:self.bridge];
return self.camera;
}
return self.camera;
}
Hope thats help.