Help regarding the issue of navigation between different screens on the base of response from API
code which I have done so far is pasted below
//App.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import mtag from './screens/mtag';
import recharge from './screens/recharge';
const AppNavigator = createStackNavigator(
{
Mtag: mtag,
Recharge: recharge
},
{
initialRouteName: "Mtag"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
//mtag.js
//I WANT TO NAVIGATE FROM THIS SCREEN TO ANOTHER AFTER TAKING RESPONSE FROM API
import React , {useState} from ‘react’;
import {
StyleSheet,Text,Keyboard,StatusBar, ListView
} from ‘react-native’;
import {Container,Header,Input,Label,Content,Title,Card,CardItem,Button,Body} from ‘native-base’;
import {createStackNavigator , createAppContainer , withNavigation} from ‘react-navigation’;
//import recharge from ‘./screens/recharge’;
const mtag: () => React$Node = () => {
//const [email,setEmail] = useState();
// const [password,setPassword] = useState();
const [mtag_id,setmtag_id] = useState();
const [token,setToken] = useState();
const [balance,getBalance] = useState();
validateUser = async()=>{
//alert(mtag_id);
await fetch('http://SERVER_API/api/v1/user/login'
,{
method:'POST',
headers:{
'Accept': 'application/json',
//'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json'
},
body: JSON.stringify({"email":'ABC@YAHOO,COM',"password": 'ABC123'}),
}).then(loginres => loginres.json())
.then(loginresData =>{
//alert(resData.token);
if(loginresData.status == '200')
{
//alert('OK')
//alert(resData.token)
fetch('http://SERVER_API/api/v1/recharge/getInfo'
,{
method:'POST',
headers:{
'Accept': 'application/json',
//'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json',
'Authorization': loginresData.token,
},
body: JSON.stringify({"mtag_id": mtag_id}),
}).then(infores => infores.json())
.then(inforesData=> {
if(inforesData.status == '200'){
alert(inforesData.status)
//this is problamatic line of code
this.props.navigation.navigate('recharge');
}
else{
alert(inforesData.status)
}
console.log(inforesData);
});
}
else
{
alert(loginresData.status);
}
console.log(loginresData);
});
}
return (
<>
<Container>
<Content>
<CardItem header>
<Text style ={styles.heading}>M-Tag Recharge</Text>
</CardItem>
<CardItem>
<Input placeholder = "M-Tag ID" style={styles.input}
value = {mtag_id} onChangeText={(value) => setmtag_id(value)}
keyboardType = 'numeric'
maxLength = {8}
/>
</CardItem>
<CardItem>
<Body>
<Button primary block onPress = {validateUser}>
<Text style = {styles.btn}>Recharge</Text>
</Button>
</Body>
</CardItem>
</Content>
</Container>
</>
);
};