CODEWITHSUNDEEP
react-native
Hector4888
Hector4888

Reputation: 569

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

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

Upvotes: 1

Views: 2015

Answers (2)

Bishnu Pada Chanda
Bishnu Pada Chanda

Reputation: 5416

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",
   });
}

Upvotes: 2

abhinandan sharma
abhinandan sharma

Reputation: 883

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 !

Upvotes: 2

Related Questions