CODEWITHSUNDEEP
react-nativereact-native-tab-view
user8658069
user8658069

Reputation:

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

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!

Upvotes: 6

Views: 5816

Answers (1)

edu_shin
edu_shin

Reputation: 51

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

Upvotes: 2

Related Questions