Adjusted Ionicons not showing up

Expo SDK
1

I’m brand new to expo development. I adjusted the default ionicons to icons corresponding to home, info and settings, but only the home icon shows up. The phone I’m using is an android anyway, so that may be part of it, although it wouldn’t explain why the home showed up and the other two didn’t. I’d prefer to use material icons, and I read the guide and found it a bit vague [and am under severe time pressure] . Can anyone shed light on why some icons show up and not others?

2

Hi @rgallen,

Can you clarify your problem with some code please ?

3

In the navigationOptions in the MainTabNavigaor.js I replaced the default icons for these ones: (I actually tried a few, but these are current)… the only one that shows is home. Thanks for any help.
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let iconName;
switch (routeName) {
case ‘Home’:
iconName =
Platform.OS === ‘ios’
? ios-home${focused ? '' : '-outline'}
: ‘md-home’;
break;
case ‘About’:
Platform.OS === ‘ios’
? ios-information-circle${focused ? '' : '-outline'}
: ‘md-information’;
break;
case ‘Settings’:
Platform.OS === ‘ios’ ? ios-settings${focused ? '' : '-outline'} : ‘md-settings’;
}

4

What component did you use to display your icon ? <Ionicons ... /> or <Material ... />

To display material icons you have to
import MaterialIcon from '@expo/vector-icons/MaterialIcons';

And use it like this
<MaterialIcon name="settings" size={25} color={tintColor} />
Here all material icons Material Design

To display ionicons you have to
import Ionicons from 'react-native-vector-icons/Ionicons';
And use it like this
<Ionicons name="ios-settings" size={25} color={tintColor} />
Here all ionicons Ionicons: Premium Open Source Icon Pack for Ionic Framework

5

i used the Ionicons (default)

6

so you can’t use Materials icons

7

I haven’t tried the material icons yet. the icons i added were listed as ionicons on the expo website

8

i didn’t adjust the line that imported the ionicons initially. (it was a expo-generated app tabs page).

9

the expo-generated app come with react-native-vector-icons check the doc here
https://github.com/oblador/react-native-vector-icons

10

Sorry for delay. My computer crashed. I checked the entire list of icons on the expo GitHub and the ones I put in were ionicons. They don’t come up incorrectly, they just don’t show up at all, only the home button. I know they are the vector icons

11

There is a list on https://github.com/expo/vector-icons of vector icons used, and it lists which ones are ionicons, material etc…

12

okay i get it

i try it on snack.expo and it works Unnamed Snack - Snack

13

Yes they work on your snack. But they don’t show up on my tabs when i substituted them for the ones that were there initially. Do u know why that is? Thanks for your time. The icons were the only adjustment. I have react-native-vector-icons installed using yarn

14

This work in my tab app too

Image%20uploaded%20from%20iOS
Image%20uploaded%20from%20iOS640×1136 40 KB

15

i tried this

tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          case "Home":
            iconName = "md-home";
            break;
          case "Links":
            iconName = "md-information";
            break;
          case "Settings":
            iconName = "md-settings";
        }
        return (
          <Ionicons
            name={iconName}
            size={28}
            style={{ marginBottom: -3 }}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        );
      }
2 Likes
16

I can’t access my files now cos I’m doing a clean and backup, but that looks like what I did too, but made size slightly larger, 32 I think. Made font size smaller. Thanks for your assistance. It could be a slow loading issue

17

I’m so sorry i didn’t reply earlier - multiple technical issues yesterday! Thanks so much, once I removed the Platform.OS code and simplified it as shown it in your snippet, the icons showed up. Thanks again ::smile:

2 Likes
18

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.