react native function return value not showing

Question

i am using react native code but some how code not working. please let me check how i can fix. i am getting value from cache and trying to return & show value.

i tried lot some how code not working if someone has any idea please let me know

import React, { memo } from 'react';
import { Text, View, StyleSheet, AsyncStorage } from 'react-native';
import { theme } from "../core/theme";

class Dashdata extends React.Component{
    constructor(){
        super();
        this.getDataName = this.getDataName.bind(this);
        this.state = {
            displayname: ''
          };
    }
    getDataName = () => {
        const displayname = '';
            console.log('getting value from cachedd');
            const loginName =  AsyncStorage.getItem('@kidssafety:displayname')
            .then((result)=>{
              console.log(result);
              return (
                <Text>{result}</Text>
                )
            });
    }

    render(){
        return(
            <View>
                <Text style={styles.header}>Welcome Data {this.getDataName()}</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
      fontSize: 22,
      color: theme.colors.primary,
      fontWeight: "bold",
      paddingVertical: 14,
      flex: 1,
      marginTop: 100,
      width: '100%',
      textAlign: 'left'
    }
  });

export default memo(Dashdata);

Answer 1

AsyncStorage.getItem returns a promise and by the time it resolves and returns a value, your render would have moved to the next line. Ideally you should store the result to the state and use it when ready. Then your component will look like.

import React, { memo } from 'react';
import { Text, View, StyleSheet, AsyncStorage } from 'react-native';
import { theme } from "../core/theme";

class Dashdata extends React.Component{
    constructor(){
        super();
        this.getDataName = this.getDataName.bind(this);
        this.state = {
            displayname: '',
            result: '' // add result here
          };
    }
    getDataName = () => {
        const displayname = '';
            console.log('getting value from cachedd');
            const loginName =  AsyncStorage.getItem('@kidssafety:displayname')
            .then((result)=>{
              console.log(result);
              this.setState({result}) // set result to state 
            });
    }

    render(){
        const { result } = this.state
        return(
            <View>
                {!!result && (<Text style={styles.header}>Welcome Data {result})</Text>}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
      fontSize: 22,
      color: theme.colors.primary,
      fontWeight: "bold",
      paddingVertical: 14,
      flex: 1,
      marginTop: 100,
      width: '100%',
      textAlign: 'left'
    }
  });

export default memo(Dashdata);

Answer 2

AsyncStorage returns a promise. So you have to wait until it resolves.

Use Async/await to fix your problem.

getDataName = async () => {
    const loginName = await AsyncStorage.getItem('@kidssafety:displayname')
    this.setState({
        displayname: loginName
    })
}

Now you can display your values inside render

<Text style={styles.header}>Welcome Data {this.state.displayname}</Text>

Important

Since you are using as getDataName as an arrow function, you don't have to bind it as

this.getDataName = this.getDataName.bind(this)

Hope this helps you. Feel free for doubts.