React native Tab background Change

Question

I'm using the simple react native tab. The tab works fine but it shows the default blue color background of the tag. That means About Courses and Chat are in a row and getting blue color by default. How could I change it?Also, how could I change ' ' this heading font-family, text color, and others property?

<View style={{ backgroundColor: 'red' }}>
  <Tabs tabStyle={{ backgroundColor: 'red' }}>
    <Tab heading="About Test" tabStyle={{ color: 'red' }}>
      <View>
        <Text>Hi THis is from ABout</Text>
      </View>
    </Tab>
    <Tab heading="Courses">
      <Text>Hi this is from Courses</Text>
    </Tab>
    <Tab heading="Chat">
      <Text>This is from Chat</Text>
    </Tab>
  </Tabs>
</View>

import { Container, Tab, Tabs, StyleProvider } from 'native-base'; but the whole line is getting blue background. mainly background is not changing — megh, May 04 '21 at 09:17
I would suggest you to use [Material Top Bar Navigator](https://reactnavigation.org/docs/material-top-tab-navigator). Its docs are super easy and to the point. — Kartikey, May 04 '21 at 09:33

Kartikey · Accepted Answer · 2021-05-05T11:53:29.033

0

Change it like this

    <Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }}>
        <Tab
          heading="About Test"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black', fontWeight: '100' }}
          activeTextStyle={{ fontWeight: '800',color: 'white' }}>
          <View>
            <Text>Hi THis is from ABout</Text>
          </View>
        </Tab>

        <Tab
          heading="Courses"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black', fontWeight: '100' }}
          activeTextStyle={{ fontWeight: '800',color: 'white'  }}>
          <Text>Hi this is from Courses</Text>
        </Tab>

        <Tab
          heading="Chat"
          tabStyle={{ backgroundColor: 'white' }}
          activeTabStyle={{ backgroundColor: 'orangered' }}
          textStyle={{ color: 'black', fontWeight: '100' }}
          activeTextStyle={{ fontWeight: '800',color: 'white'  }}>
          <Text>This is from Chat</Text>
        </Tab>
      </Tabs>

For underline styling just add

tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }}

to the <Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }} />

Also on Android I got to see that not setting activeTextStyle color shows no text..To fix this add

activeTextStyle={{ fontWeight: '800', color: 'white' }}> // Color as you desire

For removing border around the box

Add tabContainerStyle={{ elevation: 0 }} to <Tabs />, like this

 <Tabs tabBarUnderlineStyle={{ backgroundColor: 'dodgerblue' }} tabContainerStyle={{ elevation: 0 }} >

To change Background Color of inside tabs space add style={{ backgroundColor: 'grey' }} to <Tab />, like this

<Tab
  heading="About Test"
  style={{ backgroundColor: 'grey' }}> // This line right here
      <View>
        <Text>Hi THis is from ABout</Text>
      </View>
</Tab>

Check working example here

edited May 05 '21 at 11:53

answered May 04 '21 at 09:51

Kartikey

4,516
4
15
40

Thanks that works for me but i want an underline on selected tabs. How to do it? Also selected tab's background is orangered but its text is unvisible. Cant't see it. How to make it visible? – megh May 04 '21 at 10:02
Check my answer I've added way to style the `underline` also.. Also check the snack link to see the working example – Kartikey May 04 '21 at 10:09
Hi just awesome. thanks a lot. But my selected tab's text is not visible. How to make it visible? I'm using android divice – megh May 04 '21 at 10:14
Added fix for where Text was not visible..now it will be visible – Kartikey May 04 '21 at 10:22
Super.. Just awesome. It works like i wanted. Thanks a lot man. – megh May 04 '21 at 10:27
If you are satisfied with the answer..Consider Accepting it..Thanks.It willl help others with the same problem in future – Kartikey May 04 '21 at 10:28
I'm facing another problem. Can't fix my tabs border like the given design i've upload two screenshot in drvie and shared link. There are two picture one is given and one is that i've made. Please have a look and let me know. https://drive.google.com/drive/folders/1DdAEMJ6wrFZloB0byvdpPSeQcEK-EzE1?usp=sharing – megh May 05 '21 at 11:05
You want to make your border length small and thin. Right?? – Kartikey May 05 '21 at 11:13
There will be no border . Just Text will be visible and same background all over the screen. You can see the desgin image that i'm following. But my code shows an border or something like divider around the Tabs – megh May 05 '21 at 11:15
Added solution for your problem – Kartikey May 05 '21 at 11:27
That works fine . Great. But another problem is the text under Tab tag's background Color is not changing. For Example, I'm selecting About Test it shows below that 'Hi This is from about test.' . But the back ground color of 'Hi this is from ABout Test Is not changing.' I want a Grey background color of 'Hi THis is from ABout' – megh May 05 '21 at 11:46
I've added solution for that also – Kartikey May 05 '21 at 11:53
You're really great .Can't thank you enough man. Is there any system at StackOverflow to follow you? – megh May 05 '21 at 11:55
Happy to help!. If your problem is solved please Accept the answer so that it may help others on Stack Overflow...You can contact me throught [LinkedIn](https://www.linkedin.com/in/kartikeyvaish/). – Kartikey May 05 '21 at 11:59
I dont know how to accept answer. please explain – megh May 05 '21 at 12:11
See the tick button in my answer You have to click it.. Check [this](https://i.imgur.com/Bs2TW3O.png) image to find out. I've marked it with an arrow – Kartikey May 05 '21 at 12:16
How can i set the box shadow at bottom? See the gievn design image – megh May 05 '21 at 19:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/232003/discussion-between-kartikey-vaish-and-megh). – Kartikey May 05 '21 at 19:23

React native Tab background Change

1 Answers1