expo / google-fonts

Use any of the 1000+ fonts (and their variants) from fonts.google.com in your Expo app.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

google-font "Lato not working

eebbann opened this issue · comments

import { StatusBar } from 'expo-status-bar'; 
import React, { useState, useEffect } from 'react';
import SignIn from './src/screens/SignIn';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SignUp from './src/screens/SignUp';
import AppLoading from 'expo-app-loading';
import {
  useFonts,
  Lato_100Thin,
  Lato_100Thin_Italic,
  Lato_300Light,
  Lato_300Light_Italic,
  Lato_400Regular,
  Lato_400Regular_Italic,
  Lato_700Bold,
  Lato_700Bold_Italic,
  Lato_900Black,
  Lato_900Black_Italic,
} from '@expo-google-fonts/lato';

const Stack = createNativeStackNavigator();

function App() {
  return (
      <Stack.Navigator initialRouteName="SignIn" >
        <Stack.Screen name="SignIn" component={SignIn} options={{headerShown:false}}/> 
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator> 
  );
}  
//fonts 
export default () => {
  let [fontsLoaded] = useFonts({
    Lato_100Thin,
    Lato_100Thin_Italic,
    Lato_300Light,
    Lato_300Light_Italic,
    Lato_400Regular,
    Lato_400Regular_Italic,
    Lato_700Bold,
    Lato_700Bold_Italic,
    Lato_900Black,
    Lato_900Black_Italic,
  });

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

fontFamily "Lato_900Black," is not a system font and has not been loaded through 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 Font.loadAsync.

I second that. The error comes up after all expo packages have been updated. What is causing this?

figured it out u need to remove/uninstall expo-font and leave expo-google-font as they both might be clashing