How to style <TabBarItem> icons in React Native

Question

I use response-native-icons in mine and I cannot add styles to it. Adding styles to styles or applying them to elements above the panel, and not inside the TabBar.

For example,

• I would like to add 5px right below the icon text.
• Add an opaque backgroundColor around the icon when it is active
• Change text color

Here is what I have, styles skipped my target and stylized elements 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>

Why do I need to target the styles I want for the TabBarItem icons?

Answer 1

You must specify a style for TabBarIOS. eg:

<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 tintColorand barTintColordetails.

here is a screenshot:

Answer 2

action-native-icons git

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',
        });
      }}>

Answer 3

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',
          });
      }}>

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 helps