Not able to set Initials of <Avatar> based on AsyncStorage value - react-native

Question

I am building a React Native IOS App and designing a Header in DrawerNavigator with Avatar and want the Initials inside it based on user logged-in.
Below is the Drawer Header component which is attached to main Navigator.
DrawerHeader.js:
import React, {Component} from 'react';
import { Platform, TouchableOpacity, Image, View, Text, StyleSheet } from 'react-
native';
import AsyncStorage from '#react-native-community/async-storage';
import { Avatar } from 'react-native-elements';
export default class DrawerHeader extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: null
};
this._loadDataFromAsyncStorage();
}
_loadDataFromAsyncStorage = async () => {
const userNameData = await AsyncStorage.getItem('userDatauserid');
const obj = JSON.parse(userNameData);
const userName = obj.name;
alert('_bootstrapAsync in drawerheader'+userName);
this.setState({
userName : userName
})
};
render() {
{!this.state.userName && this._loadDataFromAsyncStorage()}
if (this.state.userName){
return (
<View
style={{
backgroundColor: '#690040',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<View style={styles.avatarview}>
<Avatar activeOpacity={0.7} rounded title={this.state.userName} />
</View>
<Text style={styles.userNameView}>{this.state.userName}</Text>
</View>
);
} else {
return (
<View style={{ flexDirection: 'row' }}>
<Text>No User Id</Text>
</View>
)
}
}
}
const styles=StyleSheet.create({
avatarview:{
right:'35%',
top:'10%',
backgroundColor:'blue'
},
userNameView:{
right:'35%',
top:'20%'
}
})
The Alert in the above code is giving correct output as below:
_bootstrapAsync in drawerheader Poornima
, where Poornima is the name of user.Below is the DrawerNAvigator in my app.
I want this to be set in Avatar as P inside the square icon as show in the below picture.
But I am getting the name itself inside the square icon.Can anyone explain how to add state data to the title component of Avatar.Thanks in Advance.
I checked with the code to assign the First character of the userName as below:
title={this.state.userName?.charAt(0)} .But I am getting an error as below:

Answer 1

Because you are passing whole string, it will display whatever you will pass in title props
If you will pass title={'MD'}, it will display MD
If you will pass title={'Michel David'}, it will show whole name
It is mentioned in document itself https://reactnativeelements.com/docs/avatar
In your case if you want first character only, you can write title={this.state.userName?.charAt(0)}

Answer 2

Due to change in requirements,I used email id in the Drawer Nvigator.It is now taking the character at index 0 and displaying the first letter of emailId inside Avatar Icon.Below is the working code:
DrawerHeader.js
import React from 'react';
import { Platform, TouchableOpacity, Image, View, Text, StyleSheet }
from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
import { Avatar } from 'react-native-elements';
export default class DrawerHeader extends React.Component {
constructor(props) {
super(props);
this.state = {
emailId:null
};
this._loadDataFromAsyncStorage();
}
_loadDataFromAsyncStorage = async () => {
const userDatalogin = await AsyncStorage.getItem("userDatalogin");
const obj = JSON.parse(userDatalogin);
console.log(obj);
var emailid = obj.textemailid;
this.setState({
emailId : emailid,
})
};
render() {
{!this.state.emailId && this._loadDataFromAsyncStorage()}
if (this.state.emailId){
return (
<View
style={{
backgroundColor: '#0437F2',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Avatar size='medium'
rounded
backgroundColor='green'
right='35%'
top='10%'
title={this.state.emailId?.charAt(0)} />
</View>
<Text style={styles.userNameView}>{this.state.emailId}</Text>
</View>
);
} else {
return (
<View style={{ flexDirection: 'row' }}>
<Text>No User Id</Text>
</View>
)
}
}
}
const styles=StyleSheet.create({
userNameView:{
right:'15%',
top:'20%'
}
})
I have used emailid instead of username based on change in requirement.Find the below output screen.