Develop Reference

React Native auth error handle with <View> component

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.

Error: Request failed with status code 404 in react native on a working API call

I'm facing an issue from axios which is returning a 404 error on api call. This
API end point is already using many times in my application but in a particular scenario this API is returning 404 error status in catch block. Here is the scenario..
I have created an invite link to my application and when a user click on the invite link they will redirect to the Application and on startup I'm displaying a popup component with buttons. when the user click the button to join a particular event on the Application axios patch request is returning 404 error status on catch block. But in other cases this API is working fine. Anybody knows how this is happening..
here is the code sample
{gameId != "" &&
<GameInvitationPopup
id={gameId}
setGameId={setGameId}
/>
}
When we click on the GameInvitation pupup,
<View style={{ alignItems: 'center', marginVertical: 20 }}>
<Text style={styles.h3Black}>Will you join the game?</Text>
<View style={[styles.rowFlex, { marginTop: 10 }]}>
<TouchableOpacity
onPress={() => updateGameData(1)}
activeOpacity={0.6}
style={styles.yesView}>
<Text style={styles.h3Medium}>Yes</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => updateGameData(2)}
activeOpacity={0.6}
style={styles.noView}>
<Text style={styles.h3Medium}>No</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => updateGameData(3)}
activeOpacity={0.6}
style={styles.maybeView}>
<Text style={styles.h3Medium}>Maybe</Text>
</TouchableOpacity>
</View>
</View>
When we click on the updateGameData function,
const updateGameData = (stat) => {
setLoading(true)
gameStatusUpdateApiNw(id, stat)
.then((out) => {
setGameId("")
setLoading(false)
setShowAlert(true)
})
.catch(() => {
setLoading(false)
})
}
This is the API request code, this API is a working API and and the body provide is correct, but still I'm getting 404 error status,
const gameStatusUpdateApiNw = async (id, status) => {
const state = store.default.getState();
const token = state.authReducer.authToken;
const url = `${BASE_URL}/api/games/status/${id}`;
console.log('status url is ', url);
try {
const {data} = await patchRequest(
url,
{status: status},
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
console.log('data game ', data);
return data;
} catch (e) {
throw e;
}
};
Anybody knows how this error occur in a working API when we provide correct body into it. Please help

Loading spinner not showing

I am using firebase in a react native app along with the spinner from 'react-native-loading-spinner-overlay'.
Im trying to show the spinner while the user is authenticating to firebase but the spinner isn't showing up. This is the function that handles an user trying to auth:
const [spinnerState, setSpinnerState] = useState(false)
...
const handleAuthenticationAttempt = () => {
if (emailStatus == false || passwordStatus == false) {
Alert.alert(
"ERROR",
"Something went wrong... Please make sure you have inserted all data correctly.",
[{
text: "OK",
style: "ok",
}])
} else {
const auth = getAuth(app);
setSpinnerState(true)
signInWithEmailAndPassword(auth, email, password)
.then(() => {
setSpinnerState(false)
console.log("success")
})
.catch((error) => {
Alert.alert(
"ERROR",
"Something went wrong... Please check the email and password you entered is correct: " + error.code,
[{
text: "OK",
style: "ok",
}])
})
}
}
This is my render:
<View style={styles.container}>
<Spinner
visible={spinnerState}
textContent={'Loading...'}
textStyle={{ color: 'rgb(200, 200, 200)' }} />
<View style={styles.containerSvg}>
<LinearBackground />
</View>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={styles.containerAlign}>
// OTHER INPUTS
<ButtonAction onPress={handleAuthenticationAttempt} text={'LOGIN'} backgroundColor='rgba(20, 120, 160, 0.6)' />
</View>
</TouchableWithoutFeedback>
</View>
In theory this should work but it doesn't.
I have changed the spinner location multiple times but it never seems to show up. Any ideas on what's going on?
EDIT: Even when using setTimeout, the spinner never actually shows up.

Fixed it, had to use conditional rendering, which is quite strange considering other snack examples using what I had above worked.
{loadingStatus && <Spinner
visible={true}
textContent={'Loading...'}
textStyle={{
color: '#FFF'
}} />
}

React native progress steps authentication before moving to next step

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!

QR Scanner react-native crash on second invocation

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>
}
/>