How to change backgroundColor of selected Tab in react-native-tab-view

Question

I use react-native-tab-view. So how to set background color only to selected tab?
This is what I have...

<TabView
                navigationState={this.state}
                renderScene={SceneMap({
                  first: FirstRoute,
                  second: SecondRoute,
                  third: ThirdRoute,
                  fourth: FourthRoute,
                })}
                onIndexChange={index => this.setState({ index })}
                initialLayout={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}
                useNativeDriver = {true}
                renderTabBar={(props) =>
                    <TabBar
                      {...props}
                      indicatorStyle={{ backgroundColor: 'white' }}
                      style={{backgroundColor: "black", height: 40}}
                      renderIcon={this.renderIcon}
                      indicatorStyle={{backgroundColor: "#555555"}}
                    />
                  }
                />

Thank you!

are you found the solution? – Akshay I Sep 29 '18 at 09:15 — Akshay I, Sep 29 '18 at 09:15

score 2 · Answer 1 · edited Oct 22 '18 at 03:13

This works for text style change. The only difference in your case is that instead of changing the styles on the "Text" tag inside renderlabel you'd have to change the styles of the "View" tag.

renderLabel={({ route }) => {
  return (
    <View> //THIS IS WHERE YOU PUT THE CONDITIONAL STYLING
      <Text
        style={
          route.key === props.navigationState.routes[this.state.index].key
            ? styles.selectedTabTextStyle
            : styles.label
        }
      >
        {route.title}
      </Text>
    </View>
  );
}}

How to change backgroundColor of selected Tab in react-native-tab-view

1 Answers1