React Native / Expo / NativeBase - fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync

Question

I am creating a mobile app using Expo and would like to use NativeBase for UI components.

No matter what I try to do I get this annoying error: fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync

I had a look at the docs and used the example from there and it works!

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

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

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

Please note how they load the fonts in componentDidMount()

Now, as you can see this is the old React and I would like to use hooks and function components.

I tried this:

  useEffect(() => {
    (async () => await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    }))();
     }, [])

I tried that:

  useEffect(async() => {
      await Font.loadAsync({
        Roboto: require('native-base/Fonts/Roboto.ttf'),
        Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
        ...Ionicons.font,
      });
  }, [])

And nothing works for me! Can somebody please help? How can I load those fonts?

Answer 1

First we have to install the expo google font that we want to use, for example:

expo install expo-font @expo-google-fonts/inter expo-app-loading

Next step we create a theme file theme.js for our native-base provider, see reference: https://docs.nativebase.io/next/customizing-fonts

import { extendTheme } from "native-base";

export const theme = extendTheme({
  fontConfig: {
    Inter: {
      400: {
        normal: "Inter_400Regular",
      },
      500: {
        normal: "Inter_500Medium",
      },
      600: {
        normal: "Inter_600SemiBold",
      },
    },
  },
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "Inter",
  },
});

Finally, we link our theme file and load the font in to the App file, see reference: https://docs.expo.dev/guides/using-custom-fonts/

import {
  useFonts,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold
} from "@expo-google-fonts/inter";
import AppLoading from 'expo-app-loading';
import { NativeBaseProvider, Box, Text } from "native-base";
import { theme } from "./theme";

export default function App() {
  let [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <NativeBaseProvider theme={theme}>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text fontWeight="500">
          Expo Google Font with Native Base
        </Text>
      </Box>
    </NativeBaseProvider>
  );
}