How to change drawer header value from another component? - react-native

Question

I'm new on react native. I'm using createDrawerNavigator for drawer list in this list i used a component to render a header with logged in user name. But i want to change that name from another component( profile screen). I'm unable to find solution.
Here is my drawer navigator code :
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon name="home" size={20} color="#0f1f7b" />
)
},
},
Profile: {
screen: Profile,
navigationOptions: {
drawerLabel: 'Profile',
drawerIcon: () => (
<Icon name="user" size={20} color="#0f1f7b" />
),
},
},
Logout: {
screen: Logout,
navigationOptions: {
drawerLabel: 'Logout',
drawerIcon: () => (
<Icon name="sign-out" size={20} color="#0f1f7b" />
)
},
}
},
{
drawerBackgroundColor: "#fff",
contentOptions: {
activeTintColor: '#000',
inactiveTintColor: '#000',
activeBackgroundColor: '#bfc7f3',
itemStyle: {
fontSize: 12,
},
},
contentComponent: (props) => (
<View>
<ScrollView>
<DrawerUserDetail />
<DrawerItems
{...props}
getLabel = {(scene) => (
<View style={{width:width/1.9}}>
<Text style={{color:'#000',fontSize:18,fontWeight:'500',paddingBottom:10,paddingTop:10}}>{props.getLabel(scene)}</Text>
</View>
)}
/>
</ScrollView>
</View>
)
});
Here is drawer user detail code :
constructor(props){
super()
this.state={
name:'',
}
}
render() {
return (
<View style={styles.profileBg}>
<Text style={{fontSize:20,color:'#fff',fontWeight:'600',left:20}}>Hello! {this.state.name}</Text>
</View>
);
}
I want change name state from profile component whenever user update name it will reflect on drawer screen.

Answer 1

You can create a separate component and use this component in your DrawerNavigator.
<DrawerUserDetail navigation={props.navigation} />
And here is component :
export default class DrawerUserDetail extends Component<Props> {
componentDidMount() {
//You can call your API here.
}
<View style={styles.profileBg}>
<View style={styles.profileHeader}>
<Text style={styles.name}>{this.state.name}{' '}</Text>
<Text onPress={()=> this.props.navigation.navigate('ProfileUpdate')}
style={styles.changePassword}>Manage Account</Text>
</View>
</View>
}