react-native-elements fontFamily issue

Question

After installing react-native-elements and its dependencies, I'm unable to get the SearchBar component to render as it should

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
import { SearchBar } from 'react-native-elements';

const HomeScreen = () => {
  const [search, setSearch] = useState('');

  return (
    <View>
      <SearchBar
        placeholder="Search, organisations, projects, and more"
        value={search}
        onChangeText={(searchTerm) => setSearch(searchTerm)}
      />
    </View>
  );
};

In the terminal console I get the following warnings

fontFamily "Material Icons" 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.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at src/context/index.js:29:19 in loginUser

Here is my package.json dependencies

"dependencies": {
  "@expo/vector-icons": "^12.0.5",
  "@react-navigation/bottom-tabs": "^6.0.9",
  "@react-navigation/drawer": "^6.1.8",
  "@react-navigation/native": "^6.0.6",
  "@react-navigation/stack": "^6.0.11",
  "axios": "^0.24.0",
  "expo": "~44.0.0",
  "expo-camera": "~12.1.0",
  "expo-image-picker": "^12.0.1",
  "expo-status-bar": "~1.2.0",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
  "react-native-elements": "^3.4.2",
  "react-native-gesture-handler": "~2.1.0",
  "react-native-pager-view": "^5.4.9",
  "react-native-reanimated": "~2.3.1",
  "react-native-safe-area-context": "3.3.2",
  "react-native-screens": "^3.10.1",
  "react-native-vector-icons": "^9.0.0",
  "react-native-web": "~0.17.5"
},
"devDependencies": {
  "@babel/core": "^7.16.5",
  "@babel/preset-typescript": "^7.16.7"
},

All the resource on the matter I've found so far are a couple of years old and don't solve my problem, for example:

fontFamily Material Icons is not a system font and has to be Loaded through Exponent

and

console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync

Answer 1

The icons need to be preloaded at the start of the App.

Reference here

This is what I had to do in App.js:

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

export default () => {
  const [fontsLoaded] = useFonts({
    Ionicons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
    MaterialIcons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
    'Material Icons': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
  });

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

  return (
    <Main />
  );
};