Nativebase: using FontAwesome

[Alfan235]

how can I change to FontAwesome when I use Icon component?

[sankhadeeproy007]

Hey, that has been in our roadmap for quite some time. Will add it with the next release. If you need it urgently though, go to Widgets/Icon.js and set whichever Icon set you wish to use.

[s2t2]

Cool. Can I expand the scope of this issue to include all the available icon frameworks provided by react-native-vector-icons?

https://github.com/oblador/react-native-vector-icons#bundled-icon-sets

[sankhadeeproy007]

Yes, sure you can. You just need to define the Icon variable to your desired Icon family, and you're set.

[sankhadeeproy007]

Hi, you can set the variable in light.js to your desired Icon family. Only the ones available in react-native-vector-icons are supported.

[melvinsg]

According to the IconNB implementation:

<Icon theme={{ iconFamily: 'FontAwesome' }} name='fontawesome-name' />

[Norfeldt]

@melvinsg It doesn't work for me.

[melvinsg]

Make sure you are using the native base version of the component:

import { Icon } from 'native-base'

then you can override the theme property defaults

import {Platform} from 'react-native'

const fontAwesome = {
    iconFamily: 'FontAwesome',
    iconFontSize: (Platform.OS === 'ios' ) ? 30 : 28,
    iconMargin: 7,
    iconLineHeight: (Platform.OS === 'ios' ) ? 37 : 30,
}

Now you can use it

<Icon theme={fontAwesome} name='fontawesome-name' />

[craftzdog]

Seems like theme prop is no longer supported. I made a custom Icon class for using other icon families:

import React, { Component } from 'react'
import { StyleProvider, getTheme, Icon } from 'native-base'

type Props = {
  family?: string,
  name: string,
  style?: any
}

export default class MIcon extends Component<Props> {
  render () {
    const { family, name, style } = this.props
    const icon = <Icon name={name} style={style} />
    if (family) {
      const customTheme = getTheme({iconFamily: family})
      return <StyleProvider style={customTheme}>{icon}</StyleProvider>
    } else {
      return icon
    }
  }
}

Example:

<Icon
  family='FontAwesome'
  name='pause-circle-o'
  style={{ fontSize: 20, color: 'red' }]}
/>

[jzhw0130]

For js version:

import React, { Component } from 'react';
import { ViewPropTypes } from 'react-native';
import { StyleProvider, getTheme, Icon } from 'native-base';
import PropTypes from 'prop-types';

export default class IHIcon extends Component {
  render () {
    const { family, name, style } = this.props;
    const icon = <Icon name={name} style={style} />
    if (family) {
      const customTheme = getTheme({iconFamily: family})
      return <StyleProvider style={customTheme}>{icon}</StyleProvider>
    } else {
      return icon
    }
  }
}

IHIcon.propTypes = {
  family: PropTypes.string,
  name: PropTypes.string.isRequired,
  style: PropTypes.any
};

[hoanglong85]

My NativeBase
"native-base": "^2.3.9",
I see in node_modules/native-base/src/basic/IconNB.js

IconNB.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
    type: PropTypes.oneOf(["Ionicons", "Entypo", "FontAwesome", "Foundation", "MaterialIcons", "MaterialCommunityIcons", "Octicons", "Zocial", "SimpleLineIcons"]),
};

and i usage <Icon type="FontAwesome" name="calendar-plus-o" /> and this work for me

Thanks NativeBase!

[blackdynamo]

Why isn't this in the docs?

<Icon type="FontAwesome" name="calendar-plus-o" />

[jamesnyika]

exactly. There is a lot of stuff in NB that is not in the docs. You have to read the comments in code to find out

[melvinsg]

Vector Icons are Native Base dependency, so it's even easier to include the needed collection:

import FontAwesome from 'react-native-vector-icons/FontAwesome'

<FontAwesome name='calendar-plus-o' />

[SupriyaKalghatgi]

https://github.com/GeekyAnts/native-base-docs/commits/docs/updateTillTag2.3.10

Soon to be live