Passing this.state into static function - react-native

Question

I am trying to set the headerTitle in the header bar to be the username of the logged in user: this.state.username. However, when I try to set navigationOptions to a function, I am unable to pass in the current state.
What would be the best way to set the headerTitle inside the static navigationOptions? I believe that navigationOptions must remain static, otherwise nothing will be displayed.
class profile extends React.Component {
static navigationOptions =
{
headerTitle: this.state.username
};
const TabStack = createBottomTabNavigator(
{
Home: {
screen: home,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name="home" size={25} style={{ color: tintColor }} />
),
},
},
Explore: {
screen: explore,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name="search" size={25} style={{ color: tintColor }} />
),
}
},
Profile: {
screen: profile,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name="person" size={25} style={{ color: tintColor }} />
),
}
},
Create: {
screen: createCompetition,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name="add" size={25} style={{ color: tintColor }} />
),
}
},
Payment: {
screen: payment,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name="attach-money" size={25} style={{ color: tintColor }} />
),
title: 'Payment',
}
}
},
{
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: 'black',
style: { backgroundColor: 'white', }
},
},
)
TabStack.navigationOptions = ({ navigation, screenProps }) => {
const childOptions = getActiveChildNavigationOptions(navigation, screenProps)
return {
title: childOptions.title,
headerLeft: childOptions.headerLeft,
headerRight: childOptions.headerRight,
}
}

Answer 1

So instead of using react navigation Header ive disabled it and used my own cutsom,
This is my Header.js :
import React, {Fragment, Component} from 'react';
import {View, Text, TouchableOpacity, Image, SafeAreaView} from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import {headerStyles} from '../style/headerStyles';
export default class Header extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View
style={{
flexDirection: 'row',
paddingBottom: hp('3.125%'),
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View style={{opacity: 0}}>
<Image source={require('../assets/images/crossIcon.png')} />
</View>
<View style={{flexShrink: 1}}>
<Text style={headerStyles.headerText}>{this.props.title}</Text>
</View>
<View style={{left: -20, paddingLeft: 10, marginLeft: 10}}>
<TouchableOpacity
style={headerStyles.imageView}
onPress={() => this.props.navigation.goBack()}>
<Image
style={{height: 15, width: 15}}
source={require('../assets/images/crossIcon.png')}
/>
</TouchableOpacity>
</View>
</View>
);
}
}
and you can import in any component like :
import Header from '../components/Header';
return(
<Header title={this.state.userName} navigation={this.props.navigation} />
)
With this you have enough power to do anything you want with header.
Hope it helps. feel free for doubts.

Answer 2

I assume you are using react-navigation, I suggest you set a navigation param in your component and then get the param in the navigationOptions.
after login do this:
navigation.setParams({ headerTitle: this.state.userName})
and then inside your navigationOptions where you already have navigation:
return { title: navigation.getParam('headerTitle') }