CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosnative-base
NewTech Lover
NewTech Lover

Reputation: 1263

How to change style scrollable tab in React-native

I am using Native-Bae in my project and already added those style elements for the scrollable tab but it's not changing the color as I need. Here is my code.

<Tabs styles={{tabBarUnderlineStyle:'#0dc49d',tabBarActiveTextColor:'#0dc49d',tabBarInactiveTextColor:'#D3D3D3'}} >

   <Tab  heading="Most Popular">
     <Articles />
   </Tab>
   <Tab heading="New">
     <ArticlesNew />
   </Tab>
 </Tabs>

It shows default blue color while I need to change underline color, active text color to green and inactive text color to gray.

Upvotes: 1

Views: 1575

Answers (1)

Rizal Sidik
Rizal Sidik

Reputation: 989

i have try your code, and got this solution, first is change properties of your Tabs if you want change the underline style :

<Tabs tabBarUnderlineStyle={{ backgroundColor:'#0dc49d' }} >

and then change style properties of your tab using this code :

<Tab  heading="Most Popular" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >

and your full code is should be like this :

<Tabs tabBarUnderlineStyle={{ backgroundColor:'#0dc49d' }} >

   <Tab  heading="Most Popular" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >
     <Articles />
   </Tab>
   <Tab heading="New" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >
     <ArticlesNew />
   </Tab>
 </Tabs>

Hope can help your problem, please notice me if you have an error, thanks :)

Upvotes: 2

Related Questions