I am trying to do an API Post with some information that I am saving in variables, using different functions.
To get this data before making the POST method, I have to get a Bearer Token also with an API Post, but this request takes some little time.
I have a button on my screen that I want to use it to make the final API Post, save the info in Firebase and navigate to the next screen, but for that I need my Token bearer. I don’t know how to make my second API Post to get in time the bearer token in a variable, so I can made in a correct way my API Post final. Maybe is a easier way to set my bearer token to Axios, because I have to do several API Post in different screen and this token has an expire time.
The problem with my code is that after I touch the botton 3 times, it works, and I can navigate to my next screen (the name of the next screen is in the response of the API Post final).
First time I touch the button it appears the next error:
The action ‘NAVIGATE’ with payload {“name”:””} was not handled by any navigator.
You need to pass the name of the screen to navigate to.
But after this, mi bearer token is set correctly and appears in mi console.
The second time I touch my button, the functions that I made to make this call async, are correctly execute sending this message to the console:
Promise Resolved:
LOG Next step –> API POST
LOG Data saved in DB and API Request completed
After this the bearer token appears again in my console, following with the response of the final API Post, but it doesn’t navigate correctly.
The third time I touch the button it works correctly, sending the same info to the console that in the last step, but navigating to next screen.
I attached my code, changing some info for security.
import React, {useState, useContext, useEffect} from 'react';
import axios from 'axios';
import firestore from '@react-native-firebase/firestore';
import FormInput from '../../components/FormInput';
import {
View,
Text,
ScrollView,
FlatList,
TouchableOpacity,
Image,
TextInput,
Button
} from 'react-native';
import { COLORS, SIZES, FONTS, icons, image, functions, dummyData} from "../../constants"
import FormButton from '../../components/FormButton';
import { AuthContext } from '../../navigation/AuthProvider';
// Variables to set new values
let user_token = '';
let nextStep = '';
//let username = '';
const myFirstScreen = ( {navigation} ) => {
const { user} = useContext(AuthContext);
const [username, setUsername] = useState();
// const [user_token, setUserToken] = useState();
// const [nextStep, setNextStep] = useState();
const [isLoading, setIsLoading] = useState(false);
// Save User name and id in Firebase database
const submitUserdata = async () => {
firestore()
.collection('UserData')
.doc(user.uid)
.set ({
userId: user.uid,
userName: username,
})
.then ( () => {
console.log('User NAME and ID Added!')
})
.catch((error) => {
console.log(error)
});
};
function getCredentialsInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve (getBearerToken())
}, 10)
})
}
async function setUserDataDB() {
const result = await getCredentialsInfo()
console.log('Promise Resolved: ')
console.log('Next step --> API POST')
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve (onSubmitFormHandler() )
}, 10)
})
};
async function callForButton() {
const result = await setUserDataDB()
console.log('Data saved in DB and API Request completed')
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve ( navigation.navigate(nextStep) )
}, 10)
})
}
//getCredentiales, client_id and client_secret wont be here in the future
const getBearerToken = () => {
const client_id = "xxxxxx";
const client_secret = "xxxxxxx";
axios.post('myurl.com',
{client_id,
client_secret})
.then(response => {
console.log(response.data);
//setUserToken(response.data.access_token);
user_token = response.data.access_token;
})
.catch((error) => {
console.log('error en Get Token ' + error);
});
}
// API Rest POST - User Name Validation -
const onSubmitFormHandler = (event) => {
axios.post("myurl.com/2",
{username},
{headers: {'Authorization': `Bearer ${user_token}`}})
.then(response => {
// If request es 200
console.log(response.data);
// setNextStep(response.data.next_action);
nextStep = response.data.next_action;
console.log(response.data.next_action)})
.catch((error) => {
console.log('Error en POST ' + error);
//setNextStep('myFirstScreen')
nextStep = 'actual screen';
});
};
return (
<View style={{
alignItems: 'center',
height: "100%",
width: "100%",
backgroundColor: COLORS.white
}}>
<View style={{
// marginTop: "10%",
// marginBottom: "10%",
alignItems: 'center'
}}>
<View style={{
backgroundColor: COLORS.lightGray1,
borderRadius: 40,
height: "85%",
width: "100%"
}}>
<View style={{
width: "100%",
paddingHorizontal: "8%",
paddingVertical: "10%"
}}>
{/* Username */}
<FormInput
labelValue = {username}
//onChangeText = {(userName) => username = userName}
onChangeText = {(userName) => setUsername (userName)}
placeholderText = "Username"
autoCapitalize = "none"
autoCorrect = {false}
/>
</View>
</View>
<FormButton buttonTitle='Save User Name'
//onPressIn ={() => {getToken()}}
onPress={() => {
// submitUserdata()
// onSubmitFormHandler()
// navigation.navigate(nextStep)
callForButton()
}}
disabled={isLoading}/>
</View>
</View>
);
}
export default myFirstScreen;Thank you in advance! Any suggestions are welcome. I dont know if the useState() hook is making something work in a bad way.