Unhanded promise rejection(this.props.navigation)

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

Try const navigation = useNavigation(); and replace this.props.navigation with navigation. You will first need to import useNavigation though.