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>

Answer 1

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