fontFamily Material Icons is not a system font and has to be Loaded through Exponent

Question

I am importing Icon from react-native-vector icons with code:

import Icon from 'react-native-vector-icons/MaterialIcons';

It seems like it is connected correctly. The code I am using to get an icon is :

 <Tab              
     title={selectedTab === 'home' ? 'HOME' : 'Home'}
     renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='android' size={33} />}
     onPress={() => this.changeTab('home')}>
     <Text>Home</Text>
 </Tab>

The full error i am getting is :

fontFamily 'Material Icons' is not a system font and has not been loaded through Exponent.Font.loadAsync.

• If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

• If this is a custom font, be sure to load it with Exponent.Font.loadAsync.

Answer 1

I think you may have changed your .babelrc, you need to use babel-preset-expo for react-native-vector-icons to work with Expo. See this example project I put together for you, where all I did was initialize it with create-react-native-app and then add the code that you provided for the icon: https://github.com/brentvatne/StackOverflow44811677

Your .babelrc should look like this: https://github.com/brentvatne/StackOverflow44811677/blob/master/.babelrc

You can read this thread for more information if you'd like to understand why this is happening: https://github.com/expo/vector-icons/issues/12