CODEWITHSUNDEEP
react-native
hzhu
hzhu

Reputation: 3799

How to style <TabBarItem> icons in React Native

I'm using react-native-icons in my and I can't seem to add styles to it. Adding styles to or results in styles being applied to elements above the bar and not inside the TabBar.

For example,

  1. I'd like to add 5px right below the icon text.
  2. Add a opaque backgroundColor around the icon when it's active
  3. Change the text color

Here's what I have, the styles have missed my target and styled the items above my icons: 

<TabBarIOS selectedTab={this.state.selectedTab}
             style={{backgroundColor: 'red', padding: 30}}>
    <Icon.TabBarItem
      style={{backgroundColor: 'blue', padding: 20}}
      title="Icon Text"
      selected={this.state.selectedTab === 'myTab'}
      iconName="navicon"
      iconSize={20}
      selectedIconName="navicon">
    </Icon.TabBarItem>

enter image description here

What should I be targeting to achieve the styles I want on the TabBarItem icons?

Upvotes: 4

Views: 7356

Answers (3)

Dlucidone
Dlucidone

Reputation: 1101

I Tried something like this-

  <TabBarIOS selectedTab={this.state.selectedTab}
  barTintColor='#dcdcdc'
  tintColor='#E41B17'>
    <TabBarIOS.Item
      title="Summary"
      selected={this.state.selectedTab === 'summary'}//here is the part which keepit as selected and you can apply property watever you want
      icon={{uri:base64Icon, scale: 2}}
      onPress={() => {
          this.setState({
              selectedTab: 'summary',
          });
      }}>

enter image description here

Similarly for another tab

    <TabBarIOS.Item
    title="details"
      selected={this.state.selectedTab === 'detail'}
      icon={{uri:base64Icon1, scale: 2}}
      onPress={() => {
              this.setState({
                selectedTab: 'detail',
            });
      }}>

Hope this might help

Upvotes: 0

Melih Mucuk
Melih Mucuk

Reputation: 7066

You should specify style to TabBarIOS. for example:

<TabBarIOS
        tintColor="yellow"
        barTintColor="red">

        <Icon.TabBarItem
          title="Home"
          iconName="ios-home-outline"
          selectedIconName="ios-home"
          selected={this.state.selectedTab === 'home'}
          onPress={() => {
            this.setState({
              selectedTab: 'home',
            });
          }}
          >
          <YourComponent />
        </Icon.TabBarItem>
</TabBarIOS>

check tintColor and barTintColor props.

here is screenshot:

TabBarIOS

Upvotes: 3

Nishanth Shankar
Nishanth Shankar

Reputation: 1976

You can follow the example in react-native-icons git repository

var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
<TabBarItemIOS
      name="home"
      iconName={'ion|ios-home-outline'}
      selectedIconName={'ion|ios-home'}
      title={''}
      iconSize={32}
      style = {styles.icon} /* Add styles here*/
      accessibilityLabel="Home Tab"
      selected={this.state.selectedTab === 'home'}
      onPress={() => {
        this.setState({
          selectedTab: 'home',
        });
      }}>

Upvotes: 0

Related Questions