React-native-tab-view: how do I change the default color of the tab, the color blue?

Created on 26 May 2019  路  2Comments  路  Source: satya164/react-native-tab-view

how do I change the default color of the tab, the color blue?

<TabView
      navigationState={this.state}
      renderScene={SceneMap({
        agenda: this.AgendaRoute,
        detalhes: this.DetalhesRoute
      })}
      onIndexChange={index => this.setState({ index })}
      initialLayout={{ width: Dimensions.get("window").width }}
    />

Most helpful comment

Use TabBar Tag,Like this

 <TabView

                              tabStyle={[{height: hp(40),}]}
                              scrollEnabled={true}
                                navigationState={this.state}
                                renderScene={SceneMap({
                                    Details: this.FirstRoute,
                                    Schedule: this.SecondRoute,
                                })}
                                renderTabBar={props =>
                                    <TabBar
                                      {...props}
                                      indicatorStyle={{ backgroundColor: '#00887A'}}
                                      style={{ backgroundColor: '#ECECEC' }}
                                      labelStyle={{color:'#000000' }}


                                    />
                                  }
                                onIndexChange={index => this.setState({ index })}
                                initialLayout={{ width: Dimensions.get('window').width,backgroundColor:'#ffffff' }}
                            />

All 2 comments

Use TabBar Tag,Like this

 <TabView

                              tabStyle={[{height: hp(40),}]}
                              scrollEnabled={true}
                                navigationState={this.state}
                                renderScene={SceneMap({
                                    Details: this.FirstRoute,
                                    Schedule: this.SecondRoute,
                                })}
                                renderTabBar={props =>
                                    <TabBar
                                      {...props}
                                      indicatorStyle={{ backgroundColor: '#00887A'}}
                                      style={{ backgroundColor: '#ECECEC' }}
                                      labelStyle={{color:'#000000' }}


                                    />
                                  }
                                onIndexChange={index => this.setState({ index })}
                                initialLayout={{ width: Dimensions.get('window').width,backgroundColor:'#ffffff' }}
                            />

As written in the documentation, styles you can apply to the tabBar are :
tabStyle
Style to apply to the individual tab items in the tab bar.

indicatorStyle
Style to apply to the active indicator.

labelStyle
Style to apply to the tab item label.

contentContainerStyle
Style to apply to the inner container for tabs.

style
Style to apply to the tab bar container.

I think the last one is that you are searching for

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndriiUhryn picture AndriiUhryn  路  3Comments

jasonkw9 picture jasonkw9  路  3Comments

jouderianjr picture jouderianjr  路  3Comments

compojoom picture compojoom  路  4Comments

moerabaya picture moerabaya  路  4Comments