reactjsreact-nativetabsreact-tabs

React native Tab background Change


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>

Solution

  • 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