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!

Cringe

are you found the solution? – Effy

Answer 1

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>
  );
}}

Misinterpret