Native Base UI Components: Solve issue with Roboto font on Android.

fontFamily ‘Roboto_medium’ is not a system font and has not been loaded through Exponent.Font.loadAsync

Hello everyone. Today’s story is about an error that I faced recently when developing a React Native app using the Native Base UI Components library.

A fellow developer suggested that for my next project on React Native I should use Native Base because it’s a great library for UI components to remove some friction from the styling and layout tasks when building a brand new app.

So I decided to give it a try. I created my new app with Expo and React Navigation as usual and them I included the Native Base library into my project following along their documentation.

At first, it was great just adding some prebuilt components into my app and see them work seamlessly. But at some point, after testing my app on iPhone, with some features completed already, I decided to test it on Android and BOOOOM: red screen on my Android device.

I started looking up for solutions on the usual places (StackOverflow, Medium, etc…) but none seems to solve my issue until I found this post on Github Native Base repository: https://github.com/GeekyAnts/NativeBase/issues/1466

This was a lifesaver, base on this post is the current solution.

My original code on App.js was this:

import React from 'react';
import AppContainer from './navigation';
export default function App() {
  return <AppContainer />;
}

Which after reading the post I modified to this:

import React, { Component } from 'react';
import AppContainer from './navigation';
import { Root } from 'native-base';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }
async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({ loading: false });
  }
render() {
    if (this.state.loading) {
      return (
        <Root>
          <AppLoading />
        </Root>
      );
    } else {
      return (
        <Root>
          <AppContainer />
        </Root>
      );
    }
  }
}

As you can see all you need to do is load the fonts you need asynchronously before rendering the App main container and problem solved.

I hope this article was of some help for anyone facing the same issue and a lot of thanks to Michael Brown (https://github.com/brownieboy) for the heads up finding the right solution to this problem.