Vector icons for android and ios

Question

In https://www.npmjs.com/package/react-native-ionicons, we're given two ways to load icons for ios and android. I tried both approaches with v9.0.0 of @expo/vector-icons.

I import Ionicons with this statement:

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

1. Remove ios/md from the name

<Ionicons name="close-circle" size={25} style={{color: 'white'}} />

I get the below error which also happens for other icon names:

Warning: Failed prop type: Invalid prop name of value close-circle supplied to Icon, expected one of ...

2. If I pass ios/android properties instead, the icon just does not show up and I get no warning eg:

<Ionicons ios="ios-close-circle" android="md-close-circle" size={25} style={{color: 'white'}} />

My current fix is based on How can I create cross platform icon in react native?. I use:

<Ionicons name={${Platform.OS === "ios" ? "ios" : "md"}-close-circle} size={25} style={{color: 'white'}} />

Is there a simpler way?

Thank you!

Answer 1

Soo, the warning suggest the name you have supplied didn't match with the icons of Ionicons. Two ways of solving it will be

1. Passing correct name to the component. To find all the names visit here
2. import Ionicons from '@expo/vector-icons/Ionicons' .

Hope if helps you !

Answer 2

It appears that it was an oversight on my side. The README for @expo/vector-icons states:

This library is a compatibility layer around @oblador/react-native-vector-icons to work with the Expo asset system.

I don't know what got me to check the documentation for https://www.npmjs.com/package/react-native-ionicons but clearly the options that can be applied to it are not meant to work with @oblador/react-native-vector-icons and thus @expo/vector-icons...

For anyone interested in cross-platform icons with expo/vector-icons, you can refer to the question and solution provided from How can I create cross platform icon in react native?