How to Use AntDesign Icon In React-Native-Elements

Question

In React Native Elements, there's a link to the icon directory. The first library is AntDesign: Screenshot

In types, they say "type (defaults to material, options are material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, feather or entypo)". AntD is not included in these. I have tried type="ant-d", type="antd", type="ant-design" and type="antdesign". I'd like to waste as little time as possible since this seems to be super straight forward. What am I missing?

Here is a snippet of my code, where I've been adding type:

render() {
  const { selectedIndex } = this.state
  const buttons = [
    { element: () => <Icon name="notification" type="ant-design" color={ selectedIndex === 0 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="credit-card" color={ selectedIndex === 1 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="account-circle" color={ selectedIndex === 2 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="camera-alt" onPress={ this.takePhoto } color={ selectedIndex === 3 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
    { element: () => <Icon name="help-outline" color={ selectedIndex === 4 ? colorsAndFonts.colors.redBalehu : colorsAndFonts.colors.warmGrey } /> },
]

Of course, I'm just getting a ? back instead of the icon.

Thanks in advance!

Answer 1

You can use like this:

    import AntIcon from "react-native-vector-icons/AntDesign";

...

    <AntIcon name="minuscircleo" color="green" size={50} />

BTW this is valid for all libraries

Answer 2

I've got the same issue, I investigated the source code and found the switch statement here which processes the type prop which you provide on the icon.

https://github.com/react-native-training/react-native-elements/blob/master/src/helpers/getIconType.js

  switch (type) {
    case 'zocial':
      return ZocialIcon;
    case 'octicon':
      return OcticonIcon;
    case 'material':
      return MaterialIcon;
    case 'material-community':
      return MaterialCommunityIcon;
    case 'ionicon':
      return Ionicon;
    case 'foundation':
      return FoundationIcon;
    case 'evilicon':
      return EvilIcon;
    case 'entypo':
      return EntypoIcon;
    case 'font-awesome':
      return FAIcon;
    case 'simple-line-icon':
      return SimpleLineIcon;
    case 'feather':
      return FeatherIcon;
    default:
      if (customIcons.hasOwnProperty(type)) {
        return customIcons[type];
      }
      return MaterialIcon;
  }

So, it looks like Ant Design hasn't been added to this helper function yet. Solution is to import it directly as in the other answer, or submit a PR to fix it (I'm submitting a GitHub issue now).