ptomasroos / react-native-tab-navigator

A tab bar that switches between scenes, written in JS for cross-platform support
MIT License
2.4k stars 415 forks source link

How to change the title on the header with this library #177

Closed jahnavi310 closed 6 years ago

jahnavi310 commented 6 years ago

I am using react-native-tab-navigator:

https://github.com/happypancake/react-native-tab-navigator

<TabNavigator style={styles.container}>
    <TabNavigator.Item
      selected={this.state.selectedTab === 'home'}
      title="Home"
      selectedTitleStyle={{color: "#3496f0"}}
      renderIcon={() => <Icon name="home" size={px2dp(22)} color="#666"/>}
      renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
      onPress={() => this.setState({selectedTab: 'home'})}>
      <SideMenu menu={MenuComponent}>
        <HomeScreen/>
      </SideMenu>
    </TabNavigator.Item>
    <TabNavigator.Item
      selected={this.state.selectedTab === 'links'}
      title="Links"
      selectedTitleStyle={{color: "#3496f0"}}
      renderIcon={() => <Icon name="user" size={px2dp(22)} color="#666"/>}
      renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
      onPress={() => this.setState({selectedTab: 'links'})}>
      <SideMenu menu={MenuComponent}>
        <LinksScreen/>
      </SideMenu>
    </TabNavigator.Item>
  </TabNavigator>

I have the the screen configured as follows:

// app/index.js

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import HomeScreen from './containers/HomeScreen';
import LinksScreen from './containers/LinksScreen';
import TabNavScreen from './containers/TabNavScreen';

const MyApp = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="home"
          component={HomeScreen}
          title="Home"
        />
        <Scene
          key="links"
          component={LinksScreen}
          title="Links"
        />
        <Scene key="tabNav"
          component={TabNavScreen}
          title="Home"
          initial
        />
      </Scene>
    </Router>
  );
}

export default MyApp;

I need to change the title of the main screen when I change the tab. Right now it is fixed to Home and anything I try seems unsuccessful.

Thanks in advance for the help.

ptomasroos commented 6 years ago

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.