Load Google Fonts in React Native with expo google fonts

#reactnative #react #googlefonts #tutorial

Google Fonts in React Native

check the documentation here -> https://github.com/expo/google-fonts

Start: type this into your terminal to install the expo font package

expo install expo-font

then type this command

expo install @expo-google-fonts/your-font

replace your-font with the font you want to install, like in the example below:

expo install @expo-google-fonts/lato

then add in your (for example) app.js the following code. Also check the Comments in the Code :)

// import oswald font
import {
  useFonts as useOswald,
  Oswald_400Regular,
} from "@expo-google-fonts/oswald";
// import lato font
import { useFonts as useLato, Lato_400Regular } from "@expo-google-fonts/lato";


export default function App() {
// useFont Hook
  const [oswaldLoaded] = useOswald({
// load any font variation in here
    Oswald_400Regular,
  });
  const [latoLoaded] = useLato({
    Lato_400Regular,
  });
// check if they are there
  if (!oswaldLoaded || !latoLoaded) {
    return null;
  }