CODEWITHSUNDEEP
reactjstabsiconsreact-nativetabbar
hermt2
hermt2

Reputation: 874

Adding imported icons to TabBarIOS.Item

I am trying to incorporate FontAwesome icons into my React-Native TabBarIOS, but I cannot seem to figure out how. Does anybody know a way to do this? Here is an example of one of my TabBarIOS.Items:

<TabBarIOS.Item
      selected={this.state.selectedTab === 'searchTab'}
      title={'Search Books'}
      onPress={() => this.navigateToTab('searchTab')}>
      <SearchView/>
    </TabBarIOS.Item>

Upvotes: 2

Views: 2073

Answers (1)

Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

You can use react-native-vector-icons to achieve this.

Install the package: npm install --save react-native-vector-icons

On your component page import the plugin import Icon from 'react-native-vector-icons/FontAwesome';

Your TabbarIos component:

<TabBarIOS>
      <Icon.TabBarItem
        title="Search Books"
        iconName="fa-search"
        selectedIconName="fa-search"
        >
        <View style={styles.searchStyle}><Text>Search Books ...</Text></View>
      </Icon.TabBarItem>
</TabBarIOS>

If you don't want to use 3rd party plugins, react-native TabBarIos has an example.

You'll first have to convert icon image into base64. This online tool should help/

var base64Icon = 'data:image/png;base64,.........';

<TabBarIOS.Item
      title="Blue Tab"
      icon={{uri: base64Icon, scale: 3}}  //here
      selected={this.state.selectedTab === 'blueTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'blueTab',
        });
      }}>
      {this._renderContent('#414A8C', 'Blue Tab')}
    </TabBarIOS.Item>

Upvotes: 2

Related Questions