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

1
votes

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.

2
reactjsreact-nativematerial-uiexponentexpo

2 Answers

4
votes

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

2
votes

The icons are actually fonts and must first be loaded. It seems they are autoloaded sometimes and others times are not.

So to ensure they are loaded, do this:

        import FontAwesome from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
        import MaterialIcons from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';
    ... 
      async componentWillMount() {
        try {
          await Font.loadAsync({
            FontAwesome,
            MaterialIcons
          });

          this.setState({ fontLoaded: true });
        } catch (error) {
          console.log('error loading icon fonts', error);
        }
      }
...
  render() {

    if (!this.state.fontLoaded) {

      return <AppLoading />;

    }

See complete answer here: http://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html