React Native Async Storage - Cant render value on screen

Question

Hey struggling with this one for a day now.

I am trying to store game data just the gameId and the Level for example Game 1 Level 12

Here is my screen

import React, { Component } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';


import { Text, StyleSheet, Button, View, ImageBackground, Pressable } from 'react- native';
import bg from "../assets/images/1.jpg";
import styles from '../assets/style';

 
 
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


const setScore = async (gameId, level) => {
    //// SETS THE SCORE 
    try {
        await AsyncStorage.setItem(scoreKey, level);
        console.log(value)
      } catch (error) { 
        console.log(error)
      }
    
}; 

const getScore = async (gameId) => { 
    try {
        let value = await AsyncStorage.getItem(JSON.stringify(gameId))
        if(value !== null) {
          // value previously stored 
          
            return JSON.stringify(value)
        } else {
            return "not started"
        }
      } catch(e) {
        // error reading value
      }
}; 



/// This would add game 1  and level 12 
setScore('1','12') /// This part works 
const theLevel = getScore(1)


export default function Home({navigation, route}) { 

    return (                                                                                                                                                                                                                                                                                                                                                                                                                                                             

      <ImageBackground source={bg} resizeMode="cover" style={styles.imageBG}>
          <View style={styles.GameList}>
        
           <Text style={styles.mainTitle}>Current Level is {theLevel}</Text>

         </View>

    </ImageBackground>
    );
  }

At the bottom of the above code I want to display the level but I get the error

   Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead. 

However If I alert(theLevel) it works fine can someone tell me what I am doing wrong please

Answer 1

Call getScore function from within useEffect hook of your Home component.

export default function Home({ navigation, route }) {
    const [level, setLevel] = useState(0);

    useEffect(() => {
      async function getMyLevel() {
        const lvl = await getScore(1);
        setLevel(lvl);
      }

      getMyLevel();
    }, []);

    const onPress = async () => {
      await setScore('1','12');
    };

    return (
      <ImageBackground source={bg} resizeMode="cover" style={styles.imageBG}>
        <View style={styles.GameList}>
          <Text style={styles.mainTitle}>Current Level is {level}</Text>
        </View>
        <Button title="Set Score" onPress={onPress} />
    </ImageBackground>
    );
  }