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?
3 Answers
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} />
You are providing Ionicons in String, while it is a Component. The correct way is:
<Icon as={Ionicons} name="home" size={size} color={color} />
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" />;
}
}
