fontFamily "$text-font-family" is not a system font and has not been loaded through Font.loadAsync

user_15274793 0
Viewed 1168

This is react expo project and the error appeared when using react-native-form-validation for validation.

<Input
    value={fullName}
    label="Full Name"
    captionTextStyle={styles.captionTextStyle}
    caption={errors.fullName.length > 0 && errors.fullName}
    status={errors.fullName.length > 0 ? "danger" : ""}
    onChangeText={value => this.handleChange("fullName", value)}
/>

This is one part of validation Input using react-native-ui-kitten.

The error runs because all the texts in input like labels and inputting texts.

I didn't find the reason why this error happened.

expo reactjs validation
2 Answers
user_112078780

Firsly, run npm i expo-font

Then, run npm i @expo-google-fonts/open-sans

Then, run npm i expo-app-loading

Then in your project folder create a file called hooks where your App.js is located.

in hooks folder create a file called useFonts.js and inside that paste this code

import * as Font from 'expo-font';
import {
  OpenSans_300Light,
  OpenSans_300Light_Italic,
  OpenSans_400Regular,
  OpenSans_400Regular_Italic,
  OpenSans_600SemiBold,
  OpenSans_600SemiBold_Italic,
  OpenSans_700Bold,
  OpenSans_700Bold_Italic,
  OpenSans_800ExtraBold,
  OpenSans_800ExtraBold_Italic,
} from '@expo-google-fonts/open-sans';

const useFonts = async () => {
  await Font.loadAsync({
    OpenSans_300Light,
    OpenSans_300Light_Italic,
    OpenSans_400Regular,
    OpenSans_400Regular_Italic,
    OpenSans_600SemiBold,
    OpenSans_600SemiBold_Italic,
    OpenSans_700Bold,
    OpenSans_700Bold_Italic,
    OpenSans_800ExtraBold,
    OpenSans_800ExtraBold_Italic,
  });
};

export default useFonts;

and in your App.js, write like this

import React, { Component, useState } from 'react';
import AppLoading from 'expo-app-loading';

import { StyleSheet, Text, View } from 'react-native';

import useFonts from './hooks/useFonts';

export default function RegisterScreen(props) {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFontsAndRestoreToken = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFontsAndRestoreToken}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <View>
      <Text style={{ fontFamily: 'OpenSans_400Regular' }}>Text Example</Text>
      <Text>Normal Text</Text>
    </View>
  );
}
user_131706360
Related