Title not being shown on Tab selection

[alduro]

Title is not shown for either Chats or Contacts tabs for instance. But yes for a route outside tabbar. What am I doing wrong ?

<Router name="root" navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}>
  <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
  <Schema name="withoutAnimation"/>
  <Schema name="tab" type="switch" icon={TabIcon} />
  <Route name="signIn"   header={Header} component={SignIn} initial={true}/>
  <Route name="messages" component={ChatMessagesContainer} title="Chat Messages"/>
  <Route name="contactShow" component={ContactShowContainer} hideNavBar={true}/>
  <Route name="newChat" component={NewChatContainer}/>
  <Route name="tabbar">
      <Router footer={TabBar} style={styles.tabBar}>
            <Route name="tab1" schema="tab" title="Chats" component={ChatContainer}/>
            <Route name="tab2" schema="tab" title="Projects"/>
            <Route name="tab3" schema="tab" title="Contacts" component={ContactsIndexContainer}/>
            <Route name="tab4" schema="tab" title='Me'/>
      </Router>
  </Route>
</Router>

[aksonov]

It is difficult to say from the your code, could you check Example? Tab#1, Tab#2, etc are displayed correctly as titles for tabs.

[alduro]

ChatContainer code:

`import React, { Component, PropTypes } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as chatActions from '../actions/actions';
import * as authActions from '../actions/authActions';
import Chat from '../components/Chat';

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators({
      ...authActions,
      ...chatActions
    }, dispatch)
  }
}

const mapStateToProps = (state, props) => {
  return {
    chats: state.chats.data,
    user: state.user || {}
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Chat)

However, it works ok for ChatMessagesContainer component. Looks like nested Route in tabbar Router is missing title. Or it is a matter of styling.

[aksonov]

Again, please modify this component Example project to show the problem.

[alduro]

It works on Example but all tabs Route are using the same component TabView and without Redux ( dispatch, connect ).

[aksonov]

What problem to set another component for some tab? Sorry, if it works without redux, but doesn't work with redux, then it is not the problem of this component...

[greatwitenorth]

I had a similar problem and had to add hideNavBar={true} on the root Scene. I believe it's because the root scene's navigation bar was 'overwriting' the child tabs. Not sure if this is intended behaviour, but it worked for me.

Complete example:

<Router>
  <Scene key="root" hideNavBar={true}>
    <Scene key="main" tabs={true} default="orders" >
      <Scene key="orders" component={Page} tabTitle="Orders" icon={TabIcon} />
      <Scene key="profile" component={Page} tabTitle="Profile" icon={TabIcon}/>
      <Scene key="about" component={About} tabTitle="About" icon={TabIcon}/>
    </Scene>
  </Scene>
</Router>

[ssomnoremac]

I had to use @greatwitenorth 's advice to get this working for me. I think people will keep having this problem though