allow overriding tab style

[joenoon]

Also just noticed another PR for tab style https://github.com/exponentjs/react-native-tab-navigator/pull/67

I'm fine with either. I use this to null out some default styling to get fully stretched tabs, i.e.:

  tabStyle: {
    alignItems: null,
    justifyContent: null,
    flex: 1,
    height: tabHeight
  },

[ide]

Published as 0.3.1.

[jinqkim1]

Can you provide a sample code that can change colors upon tab selection? I've been trying to figure it out for hours now..

[greg5green]

@jinqkim1 Here's an example:

class TabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: props.tabs[props.initialSelectedTabIndex].name
    };
  }

  switchTab(selectedTab) {
    this.setState({ selectedTab });
  }

  renderTab(tab) {
    const selectedTab = {
        backgroundColor: '#f3f3f3'
      }
    };
    const isSelected = this.state.selectedTab === tab.name;

    return (
      <TabNavigator.Item
        key={tab.name}
        onPress={() => this.switchTab(tab.name)}
        selected={isSelected}
        selectedTitleStyle={[styles.title, styles.selectedTitle]}
        tabStyle={[styles.tab, isSelected ? selectedTab : null]}
        title={tab.name.toUpperCase()}
        titleStyle={styles.title}
      >
        <tab.component />
      </TabNavigator.Item>
    );
  }

  render() {
    return (
      <TabNavigator
        sceneStyle={styles.scene}
        tabBarStyle={styles.tabBar}
      >
        {this.props.tabs.map(this.renderTab, this)}
      </TabNavigator>
    );
  }
}

The key lines are const isSelected = this.state.selectedTab === tab.name; and tabStyle={[styles.tab, isSelected ? selectedTab : null]}

Hope this helps.

[jinqkim1]

Thank you very much. I haven't tried this out yet, but I'm sure it will work.