Nativebase: How to render an Icon?

Question

The documentation says "Use a third-party icon library ( such as @expo/vector-icons ), with as prop."

I don't really know what that means, but let's say i want to render the Ionicon's home icon.

<Icon as="Ionicons" name="home" size={size} color={color} />

This just renders the question mark. So any idea how to use this?

Answer 1

You are providing Ionicons in String, while it is a Component. The correct way is:

<Icon as={Ionicons} name="home" size={size} color={color} />

Answer 2

Remember about import ;-) Have you read the documentation carefully? To check this out You can use the editor from the examples in the Nativebase documentation.

import React from 'react';
import { Ionicons } from '@expo/vector-icons';

export default class IconExample extends React.Component {
  render() {
    return <Ionicons name="home" size={32} color="green" />;
  }
}

Answer 3

If you're using expo:

yarn add @expo/vector-icons

Use Icon in jsx/tsx:

import { Ionicons } from '@expo/vector-icons';

<Icon as="Ionicons" name="home" size={size} color={color} />

if you're not using expo, you can use react-native-vector-icons instead:

yarn add react-native-vector-icons

don't forget to run pod update and add apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" to android/app/build.gradle

Use Icon in jsx/tsx:

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

<Icon as="Ionicons" name="home" size={size} color={color} />