Accessing React-Native State value outside the component

Question

I am new to REACT Native. I need to access state value outside the component class. I am using Tab.Navigation API.

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, SafeAreaView } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome5';
//import Login from './Login';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
AsyncStorage.setItem("id", "Hello");
function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', backgroundColor: "#fff", marginTop: 50, }}>
      <View style={{width: "100%", height: 45, backgroundColor: "#fff", flexDirection: "row", marginTop: 20}}>
          <View style={{width: "50%", alignContent: "left"}}>
              <Text style={{fontSize: 30, fontWeight: "900", alignSelf: "flex-start", marginLeft: 20}}><AntDesign name="user" color="#333" size={30} /> Wallet </Text>
          </View>
          <View style={{width: "50%", alignContent: "right"}}>
              <Text style={{fontSize: 20, fontWeight: "500", alignSelf: "flex-end", marginRight: 20}}>Add Cash <AntDesign name="plus" color="#333" size={30} /></Text>
          </View>
      </View> 
      <View style={{width: "80%", height: 120, backgroundColor: "#000", borderRadius: 20, marginTop: 30, alignContent: "center"}}>
        <Text style={styles.whiteHeader}>Available Balance</Text>
        <Text style={{fontSize: 30, fontWeight: "900", alignSelf: "center", marginLeft: 20, opacity: 0.8, color: "#333", marginTop: 10}}>NGN <Text style={{color: "#fff"}}>0.00</Text></Text>
          
      </View>
      <View style={{width: "80%", height: 100, backgroundColor: "#fff", borderColor: "#000", borderWidth: 3, marginTop: 40, borderRadius: 20}}>
        <Text style={styles.blackHeader}>Loan Balance</Text>
        <Text style={{fontSize: 30, fontWeight: "900", alignSelf: "center", marginLeft: 20, opacity: 0.8, color: "#333", marginTop: 10}}>NGN <Text style={{color: "#000"}}>0.00</Text></Text>
        
      </View>

    </SafeAreaView>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      myKey: ""
    }
    this.componentDidMount = this.componentDidMount.bind(this);
    this.getUserData = this.getUserData.bind(this);
  }
  componentDidMount(){
    AsyncStorage.getItem("Phone").then((value) => {
      this.setState({"myKey": value});
      fetch('https://savings.delibertyng.com/modules/api/data.php?id='+value)
      .then(response => response.json())
      .then(data => {
      var Data = data.Result[0]; 
      this.setState({
        Data: {
          Fullname: Data.name,
          Balance: Data.balance,
          Debt: Data.debt,
          JoinDate: Data.joindate,
          Email: Data.email,
          Address: Data.address,
          ID: Data.id,
          Phone: Data.id
        }
      })
      })
      .catch(error => console.error(error))
    }).done();
  }
  getUserData(){
  
  }
  render(){
    return (
      <NavigationContainer independent={true}>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen}
           options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({ color }) => (
              <AntDesign name="home" color="#000" size={20} />
            ),
          }}
        />
        <Tab.Screen name="Settings" component={SettingsScreen}
          options={{
            tabBarLabel: 'Account',
            tabBarIcon: ({color}) =>( <AntDesign name="user" color="#000" size={20} />),
          }}
        />
        <Tab.Screen name="Normal" component={SettingsScreen}
          options={{
            tabBarLabel: 'Add Fund',
            tabBarIcon: ({color}) =>( <AntDesign name="pluscircleo" color="#000" size={36} />),
          }}
        />
        <Tab.Screen name="Loan" component={SettingsScreen}
          options={{
            tabBarLabel: 'Investment',
            tabBarIcon: ({color}) =>( <AntDesign name="wallet" color="#000" size={20} />),
          }}
        />
        <Tab.Screen name="More" component={SettingsScreen}
          options={{
            tabBarLabel: 'Loan',
            tabBarIcon: ({color}) =>( <AntDesign name="creditcard" color="#000" size={20} />),
          }}
        />      
        
      </Tab.Navigator>
    </NavigationContainer>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  whiteHeader: {
    color: "#fff",
    fontWeight: "600",
    alignSelf: "center",
    fontSize: 20,
    marginTop: 20,
    opacity: 0.5
  },
  blackHeader: {
    color: "#000",
    fontWeight: "600",
    alignSelf: "center",
    fontSize: 20,
    marginTop: 20,
    opacity: 0.5
  }
});

Now I need to access the state values inside the HomeScreen Function. In such a way that inside the HomeScreen Function, I can have something like {this.state.Data.FullName}. Each time I try this, I get an error that says this.state is undefined.