CODEWITHSUNDEEP
react-nativefontsexpo
Jat90
Jat90

Reputation: 663

React Native Expo Google Fonts: is not a system font and has not been loaded through Font.loadAsync

I'm using Expo Google Fonts and the useFonts() method to import the fonts for my app. However I get the following error but I thought I didn't need to use Font.loadasync with the Google Fonts (as per docs here). Can you let me know what I'm doing wrong here?

import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet, Platform } from 'react-native'
import { useFonts, Kanit_400Regular, Kanit_500Medium, Kanit_700Bold } from '@expo-google-fonts/kanit';
import Colors from '../constants/Colors'

const Header = props => {

  useFonts({Kanit_400Regular, Kanit_500Medium, Kanit_700Bold})

  return (
    <View style={styles.headerContainer}>
      <View style={styles.logo}>
        <Text style={styles.headerText}>HEADER</Text>
      </View>
      <View>
        <Text style={{...styles.headerText, fontSize: 14 }}>LOGIN</Text>
      </View>
    </View>
  )
} 

const styles = StyleSheet.create({
  headerContainer: {
    padding: 15,
    paddingTop: Platform.OS === 'android' ? 40 : 15,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'space-between',
    height: Platform.OS === 'android' ? '12%' : '10%',
    borderBottomColor: Colors.borderGold,
    borderBottomWidth: 1,
    alignItems: 'center',
    flexDirection: 'row',
    fontSize: 16,
  },
  headerText: {
    fontSize: 16,
    color: Colors.primary,
    fontFamily: 'Kanit_500Medium',
  }
})

export default Header

enter image description here

Upvotes: 4

Views: 6529

Answers (3)

Aamir
Aamir

Reputation: 89

Removing fontWeight property and directly importing and utilizing the font did the trick.

Modify from:

fontFamily: "Manrope",
fontSize: 20,
fontWeight: "600",
lineHeight: 26,
letterSpacing: -0.02,

To:

fontFamily: "Manrope_600SemiBold",
fontSize: 20,
lineHeight: 26,
letterSpacing: -0.02,

Thanks to this answer on Github.

// In your FontLoader.js file:
import { useFonts } from "expo-font";
import {
  Manrope_500Medium,
  Manrope_600SemiBold,
  Manrope_700Bold,
} from "@expo-google-fonts/manrope";

Upvotes: 0

Seunope
Seunope

Reputation: 4813

In my case, I installed expo-font with yarn. To fix this issue, I uninstalled expo-font and used the command npx expo install expo-font to install expo-font and the issue disappeared

This installation method picks the compatible expo-font with your expo version. @Marco solution gave me this clue.

Upvotes: 0

Marco
Marco

Reputation: 61

In my case the problem was an incompatible version of expo-font in the package.json with the version of expo installed.

I downgraded from 10.1.0 to 10.0.4 and the fonts are now loading fine.

Remember to use expo install expo-font

I hope this helps

Upvotes: 6

Related Questions