fontFamily "FontAwesome5Free-Regular" is not a system font and has not been loaded through Font.loadAsync

Question

I'm working on a dental app in which there are icons in almost every screens. But, suddenly all the icons are not visible and just show a box with a question mark. The icon groups keep throwing errors. I changed the way the icons were imported according to expo icons document but it still wasn't working. This is the error I'm getting:

Code of one of the screens in which I am using the icons:

import React, { Component } from "react";
import * as db from '../Config/Firebase';
import {
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  FlatList,
} from "react-native";
import AntDesign from '@expo/vector-icons/AntDesign'
import Ionicons from '@expo/vector-icons/Ionicons'
import { ListItem, Avatar, Badge } from "react-native-elements";
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore'
import 'firebase/compat/auth'
import theme from "../Props/theme";
import Constants from "expo-constants";

export default class Pending extends Component {
  constructor() {
    super();

    this.state = {
      patients: [],
    };

    this.patient = null;
  }

  componentDidMount = async () => {
    this.patient = await firebase
      .firestore()
      .collection(firebase.auth().currentUser.email)
      .where("doctorEmail", "==", auth.currentUser.email)
      .where("allVisitsCompleted", "==", false)
      .onSnapshot((snapshot) => {
        var docData = snapshot.docs.map((document) => document.data());
        this.setState({
          patients: docData,
        });
      });
  };

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#FFF" }}>
        <StatusBar hidden />

        {this.state.patients.length !== 0 ? (
          <View>
            <FlatList
              data={this.state.patients}
              style={{ marginTop: 20 }}
              renderItem={({ item }) => (
                <ListItem>
                  <ListItem.Content
                    style={{
                      backgroundColor: "#f0f0f0",
                      padding: 20,
                      borderRadius: 20,
                    }}
                  >
                    <View style={{ flexDirection: "row" }}>
                      <View>
                        <Avatar
                          rounded
                          icon={{ name: "user", type: "font-awesome" }}
                          activeOpacity={0.7}
                          source={{
                            uri: "https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg",
                          }}
                        />
                        <Badge
                          containerStyle={{
                            position: "absolute",
                            top: -1,
                            right: -3,
                          }}
                          badgeStyle={{
                            width: 15,
                            height: 15,
                            borderRadius: 7.5,
                            backgroundColor: theme.darkPink,
                          }}
                        />
                      </View>
                      <View style={{ flexDirection: "column", marginLeft: 20 }}>
                        <ListItem.Title>{item.patientName}</ListItem.Title>
                        <ListItem.Subtitle>{item.patientId}</ListItem.Subtitle>
                      </View>
                    </View>
                  </ListItem.Content>
                </ListItem>
              )}
              keyExtractor={(item, index) => index.toString()}
            />
          </View>
        ) : (
          <View>
            <Text
              style={{
                marginTop: Constants.statusBarHeight + 250,
                fontSize: 35,
                fontWeight: "200",
                alignSelf: "center",
              }}
            >
              No patients found
            </Text>

            <View style={{ marginVertical: 48, alignItems: "center" }}>
              <TouchableOpacity
                style={{
                  borderWidth: 2,
                  borderColor: theme.blue,
                  borderRadius: 4,
                  padding: 15,
                  alignItems: "center",
                  justifyContent: "center",
                }}
                onPress={() => this.props.navigation.navigate("Add")}
              >
                <AntDesign name="plus" size={16} color={theme.darkBlue} />
              </TouchableOpacity>

              <Text
                style={{
                  color: theme.darkBlue,
                  fontWeight: "600",
                  fontSize: 14,
                  marginTop: 8,
                }}
              >
                Add patient
              </Text>
            </View>
          </View>
        )}
      </View>
    );
  }
}

Any ideas on how to solve this? Thanks in advance!

Answer 1

This is related to Expo, it's a known issue.

You will either have to load the font manually, see this.

Or use a library for your icons, VectorIcons has all fontawesome icons.