CODEWITHSUNDEEP
javascriptiosreact-nativereactjs
Jo Ko
Jo Ko

Reputation: 7575

How do you override a stylesheet in React Native?

I am using react-native-scrollable-tab from https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/DefaultTabBar.js#L75 and I want to override the 'borderBottomColor' property of 'tabs' from what's provided, '#ccc', to 'white'.

How can I go about doing so in React Native?

For example, I tried the following but did not work:

<ScrollableTabView
  style={{borderBottomColor: 'white'}}
>...</ScrollableTabView>

EDIT **

Upvotes: 0

Views: 234

Answers (1)

atlanteh
atlanteh

Reputation: 5835

this.props.tabStyle gives you the ability to override styles.tabs.
What you need to do is: 

<ScrollableTabView
   tabStyle={{borderBottomColor: 'white'}}
>...</ScrollableTabView>

Ok, so I looked again at the entire code, and it seems that it's not possible to only override this color. The DefaultTabBar gets its override style from the ScrollableTabView parent, but ScrollableTabView doesn't let us pass our own style.
You have two options:

  1. implement your own TabBar and pass it to ScrollableTabView through the renderTabBar prop (you could take the DefaultTabBar implementation with your changes). You can find an example of a custom TabBar Here
  2. Send a PR to the developer and help the entire community - highly recommended :)

Upvotes: 0

Related Questions