Search code examples
react-nativenative-base

Nativebase: How to render an Icon?

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?

Solution

  • 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} />