Nativebase: If i need add a custom icon that i designed, ¿How i can add in the tab <Icon>?

[SupriyaKalghatgi]

Ref: NativeBase Forum

[cristiankmb]

i have the same question... For now my app work with the default icon from ionicons on android, but in iOS i using footer tabs, this allow me add custom icons for tab.

[Jasbir23]

Tried using custom FontsAwesome Icons from react-native-vector-icons. I placed these icons in the NativeBase TabHeading. Everything seems to be working fine.

[tuononh]

@Jasbir23 I think OP means custom icon in a custom .ttf file. I'm having the same question.

[egeniegithub]

I need to use my .png icon in Tabheading

[akhil-geekyants]

@egeniegithub tried a sample code

Code

import React, { Component } from 'react';
import { Image } from "react-native";
import { Container, Header, Tab, Tabs, TabHeading, Icon, Text } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs>
          <Tab heading={<TabHeading><Image resizeMode="contain" style={{ flex: 1 }}
            source={require('./icon.png')}
          /></TabHeading>}>
            <Text>Tab one</Text>
          </Tab>
          <Tab heading={<TabHeading><Text>No Icon</Text></TabHeading>}>
            <Text>Tab two</Text>
          </Tab>
          <Tab heading={<TabHeading><Icon name="apps" /></TabHeading>}>
            <Text>Tab three</Text>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

[JakinTayo]

How do you change the color of the tab

[cristiankmb]

How do you change the color of the tab

@JakinTayo User the TabStyle Property you can see more from: https://docs.nativebase.io/Components.html#tabs-def-headref