Cannot find MaterialIcons

[frgomes]

In this code

class MyNavScreen extends NavigationAwareComponentP[String] {
  import MyNavScreen._
  def render() = {
    if (SriPlatform.isAndroid) StatusBarComponent.setBackgroundColor("#c62828")
    ScrollView(style = GlobalStyles.navScreenContainer)(
      View(style = styles.header)(
        TouchableOpacity(onPress = () => navigation.openDrawer(),
                         style = styles.menuIcon)(
          MaterialIcons(name = MaterialIconsList.MENU,
                        color = "white",
                        size = 30)
        )
      ),
      Text(style = GlobalStyles.sampleText)(props),
      Button(onPress = () => navigation.goBack(null), title = "Go Back")
    )
  }
...

... I've got the error message below:

[exp] fontFamily 'MaterialIcons' is not a system font and has not been loaded through Expo.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 Expo.Font.loadAsync.
- node_modules/expo/src/Font.js:36:10 in processFontFamily

In the Expo documentation, they suggest that custom fonts should be installed more or less like below:

class Appclass App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });

    this.setState({ fontLoaded: true });
  }

  // ...
}

However, I'm reluctant to go thru this path without first understanding whether or not there's a better way of installing custom fonts using Sri.

[frgomes]

I've posted the results of my tests in Expo foruns: https://forums.expo.io/t/cannot-load-font-from-expo-vector-icons/4752

[frgomes]

[SOLVED] At the moment, the easiest solution is loading fonts (and eventually other resources) when the application starts, still in the JS land. This is far from ideal, since we should address the issue in the ScalaJS land. However, it's enough for the time being.

App.js:

import React from 'react';
import { Font, AppLoading } from 'expo';

import * as sjs from './assets/js/scalajs-output-android.js';

export default class App extends React.Component {
  state = {
    fontsLoaded: false,
  };

  async componentWillMount() {
    await Font.loadAsync({
      'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')
    });
    this.setState({ fontsLoaded: true });
  };

  render() {
    if (!this.state.fontsLoaded) {
      return <AppLoading />;
    }

    // Choose one of: "default_root", "stackNavigation_root", "tabNavigation_root", "drawerNavigation_root", ...
    const component = sjs.default_root();
    return (React.createElement(component, {}));
  }
}

[frgomes]

It's now fixed on branch https://github.com/frgomes/mobile.g8/tree/expo-support