Getting an error Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})

Question

I am getting this error. It seems like the promise is unresolved. However, I am unsure how to fix this... I am using Async Storage

Error:

Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}).

Here is my code

const ProfileStackScreen = ({navigation}) => {
  return (<ProfileStack.Navigator>
    <ProfileStack.Screen name= {"Profile"} component={Profile}
    options ={{
      title: AsyncStorage.getItem('username'),
      headerRight: () => (
          <Icon name="cog" color={"grey"} size={26} style={{marginRight: 20}}
          onPress={() => navigation.navigate("Settings")}/>
      ),
      headerLeft: () => (
        <Icon name="users" color={"grey"} size={23} style={{marginLeft: 20}}
        onPress={() => navigation.navigate("ManageFriends")}/>
    )
    }}/>
    <SettingsStack.Screen name="Settings" component={Settings}/>
    <ManageFriendsStack.Screen name="ManageFriends" component={ManageFriends}/>
  </ProfileStack.Navigator>);
}

Edit 1:

I noticed I can do something like this

const ProfileStackScreen = ({navigation}) => {
  AsyncStorage.getItem('username').then(name => {
    //comment
    console.log(name);
  });
  return (<ProfileStack.Navigator>
    <ProfileStack.Screen name= {"Profile"} component={Profile}
    options ={{
      title: "hi",
      headerRight: () => (
          <Icon name="cog" color={"grey"} size={26} style={{marginRight: 20}}
          onPress={() => navigation.navigate("Settings")}/>
      ),
      headerLeft: () => (
        <Icon name="users" color={"grey"} size={23} style={{marginLeft: 20}}
        onPress={() => navigation.navigate("ManageFriends")}/>
    )
    }}/>
    <SettingsStack.Screen name="Settings" component={Settings}/>
    <ManageFriendsStack.Screen name="ManageFriends" component={ManageFriends}/>
  </ProfileStack.Navigator>);
}

However, I want to set the name inside my title (line 5) I cant do this.setState since I get (setState of undefined) and I can't put return inside the //comment since I get "cant find return statement"

Any ideas how I can achieve this?

EDIT 2

Tried adding navigation.setOptions

const ProfileStackScreen = ({navigation}) => {
  AsyncStorage.getItem('username').then(name => {
    navigation.setOptions({title: name});
  });
  return (<ProfileStack.Navigator>
    <ProfileStack.Screen name= {"Profile"} component={Profile}
    options ={{
      headerRight: () => (
          <Icon name="cog" color={"grey"} size={26} style={{marginRight: 20}}
          onPress={() => navigation.navigate("Settings")}/>
      ),
      headerLeft: () => (
        <Icon name="users" color={"grey"} size={23} style={{marginLeft: 20}}
        onPress={() => navigation.navigate("ManageFriends")}/>
    )
    }}/>
    <SettingsStack.Screen name="Settings" component={Settings}/>
    <ManageFriendsStack.Screen name="ManageFriends" component={ManageFriends}/>
  </ProfileStack.Navigator>);
}

However, it gets override by the name= {"Profile"} It shows Profile instead of my username.

this kind of object {_40, _65, _55, _72} is probably cause you are not waiting for an async request to be completed, you say that you are using async storage but i don't see any in your shared code — Charlie
@Charlie It is in line 5, I edited my post. Any ideas how I can modify my code to get it working? — user13283233

Charlie Charlie · Accepted Answer · 2020-04-14T01:19:11

Use setOptions in component itself, navigation.setOptions({ title: 'Some title' })

As stated here:

It's often necessary to update the options configuration for the active screen from the mounted screen component itself. We can do this using navigation.setOptions

Getting an error Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})

1 Answers