Configuring icons

Many of the components require the react-native-vector-icons library to render correctly. If you're using CRNA or Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide.

If you opted out of vector icons support using babel-plugin-optional-require, you won't be able to use icon names for the icon prop anymore. Some components may not look correct without vector icons and might need extra configuration.

Using the icon prop

Many components such as Button accept an icon prop which is used to display an icon. The icon prop supports the following type of values:

1. An icon name

You can pass the name of an icon from MaterialIcon. This will use the react-native-vector-icons library to display the icon.

Example:

<Button icon="add-a-photo">
  Press me
</Button>

2. An image source

You can pass an image source, such as an object of shape { uri: 'https://path.to' } or a local image: require('../path/to/image.png') to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an Image element.

Remote image:

<Button icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}>
  Press me
</Button>

Local image:

<Button icon={require('../assets/chameleon.jpg')}>
  Press me
</Button>

3. A render function

You can pass a function which returns a react element to be used an icon. The function receives an object with size and color properties as it's argument. element is used as is without any modification. However, it might get clipped if the provided element's size are bigger than what the component renders. It's upto you to make sure that the size of the element is correct.

Example:

<Button
  icon={({ size, color }) => (
    <Image
      source={require('../assets/chameleon.jpg')}
      style={{ width: size, height: size, tintColor: color }}
    />
  )}
>
  Press me
</Button>