How to change header title in react-native-router-flux - react-native

Question

I'm making simple application using react-native, and I am Using react-native-router-flux.
I want to change header component from 'chat' to 'Username' when i'm in nested screen. I tried several ways but I don't know where to put the header component code.
Code for TabBar
<Router titleStyle={styles.navTitle} >
<Scene key="root">
<Scene title="Chat" initial key="root" tabBarPosition='top' tabs tabBarStyle={{ top: 0, backgroundColor: '#ddd' }} tabBarIconContainerStyle={{ borderColor: '#000', borderWidth: 1}} initial>
<Scene key="first" title="First" icon={TabIcon}>
<Scene key="scarlet" component={BlueScreen} hideNavBar initial />
</Scene>
<Scene key="second" title="Second" icon={TabIcon}>
<Scene key="scarlet2" component={GrayScreen} hideNavBar initial />
</Scene>
<Scene key="third" title="Third" icon={TabIcon}>
<Scene key="scarlet3" component={ScarletScreen} hideNavBar initial />
<Scene key="root" component={SecondScene} hideNavBar title="Username" />
</Scene>
</Scene>
</Scene>
when I'm in SecondScene I want my header change from Chat to Username

Answer 1

You can add this code in the Component where you switch the tab and want username as header.
Actions.refresh({ title: 'Username' }).
you can add this line of code as per your Apps flow.
If you are switching to chat you can add
Actions.refresh({ title: 'chat' }).
Hope it helps !

Answer 2

You can change navigation title anytime. For your use when you got the username just run the following code.
this.props.navigation.setParams({
title: "YOUR_USER_NAME",
});
If you get the user name when navigating to current scene it's better you change the title in componentWillMount.
componentWillMount() {
this.props.navigation.setParams({
title: "YOUR_USER_NAME",
});
}