React-native-tab-view: renderLabel is missing `focused` and `index` parameters

Created on 19 Aug 2018 · 3Comments · Source: satya164/react-native-tab-view

Current behaviour

After this commit https://github.com/react-native-community/react-native-tab-view/commit/8116fc9963479630385f79ba27d054cef8e10dfe
renderLabel, renderIcon, renderBadge methods no longer receive focused and index parameters.

Expected behaviour

Multiple issues and PRs suggest that changing the tab elements based on the active tab is a very common problem and all of the solutions rely on the index/ focused props.
The solutions weren't very simple already but I understand that it's because of the animations.
After removing the index and focused parameters from the renderLabel method it seemed to become even harder and requires even more code to achieve the expected behavior.

Is there a way of changing the active tab label color without overwriting the whole TabBar render method like in one of your examples
https://snack.expo.io/@satya164/custom-tabbar-example ?

Thanks!

Source

t3chnoboy

Most helpful comment

I used the renderLabel.

renderLabel(props) {
  let index = 0;
  return ({ route }) => {
    const focused = index === props.navigationState.index;
    index += 1;
    return (
      <View>
        <Text
          style={[
            styles.labelStyle,
            focused ? styles.labelSelectedStyle : null,
          ]}
        >
          {route.title}
        </Text>
      </View>
    );
  };
}

and

renderTabBar(props) {
  return (
    <TabBar
      ...
      renderLabel={this.renderLabel(props)}
    />
  );
}

<TabView
  navigationState={this.state}
  renderTabBar={this.renderTabBar}
  renderScene={this.renderScene}
  onIndexChange={this.onIndexChange}
/>

chustyle on 21 Aug 2018

❤4 🎉4 👍4

All 3 comments

In an effort to help with this issue, I have submitted a small PR that will pass the focused prop to all three methods. See https://github.com/react-native-community/react-native-tab-view/pull/589

DaKaZ on 21 Aug 2018

I used the renderLabel.

renderLabel(props) {
  let index = 0;
  return ({ route }) => {
    const focused = index === props.navigationState.index;
    index += 1;
    return (
      <View>
        <Text
          style={[
            styles.labelStyle,
            focused ? styles.labelSelectedStyle : null,
          ]}
        >
          {route.title}
        </Text>
      </View>
    );
  };
}

and

renderTabBar(props) {
  return (
    <TabBar
      ...
      renderLabel={this.renderLabel(props)}
    />
  );
}

<TabView
  navigationState={this.state}
  renderTabBar={this.renderTabBar}
  renderScene={this.renderScene}
  onIndexChange={this.onIndexChange}
/>

chustyle on 21 Aug 2018

❤4 🎉4 👍4

Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated addresses a many platform specific bugs and performance problems. The documentation is updated as well.

Please try the new version and see if it addresses your issue. If not, please open a new issue following the issue template.