Fontawesome icons not rendering from Expo typescript navigation template

I am very new to React Native, and I am using Expo. When I ran expo init I chose the third template which shows examples of navigations that is also integrated within Typescript. However, when I ran the project, I had 6 warnings about some .ttf files not existing, and an error about the space-mono font that the template provided. Adding to that, the UI works fine but the icons just didn't render. I am using an iPhone 13 emulator from XCode.

You can see the output here. Notice that the bottom navbar don't have icons, despite the template clearly using FontAwesome.

Warnings

Directory for 'file:///Users/[USER_REDACTED]/Library/Developer/CoreSimulator/Devices/506A300A-C819-46EC-8F2F-72FA10954B20/data/Containers/Data/Application/85608CC5-66C8-4012-90EB-8E7268E08D89/Library/Caches/ExponentExperienceData/%2540[USER_REDACTED]%252F[PROJECT_NAME_REDACTED]/ExponentAsset-b06871f281fee6b241d60582ae9369b9.ttf' doesn't exist. Please make sure directory '/Users/[USER_REDACTED]/Library/Developer/CoreSimulator/Devices/506A300A-C819-46EC-8F2F-72FA10954B20/data/Containers/Data/Application/85608CC5-66C8-4012-90EB-8E7268E08D89/Library/Caches/ExponentExperienceData/%40[USER_REDACTED]%2F[PROJECT_NAME_REDACTED]' exists before calling downloadAsync.at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapperat node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.nameat node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsyncat node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsyncat node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv

App.tsx

import { SafeAreaProvider } from 'react-native-safe-area-context';import useCachedResources from './hooks/useCachedResources';import useColorScheme from './hooks/useColorScheme';import Navigation from './navigation';export default function App() {  const isLoadingComplete = useCachedResources();  const colorScheme = useColorScheme();  if (!isLoadingComplete) {    return null;  } else {    return (<SafeAreaProvider><Navigation colorScheme={colorScheme} /><StatusBar /></SafeAreaProvider>    );  }}

useCachedResources.ts

import * as Font from 'expo-font';import * as SplashScreen from 'expo-splash-screen';import { useEffect, useState } from 'react';export default function useCachedResources() {  const [isLoadingComplete, setLoadingComplete] = useState(false);  // Load any resources or data that we need prior to rendering the app  useEffect(() => {    async function loadResourcesAndDataAsync() {      try {        SplashScreen.preventAutoHideAsync();        // Load fonts        await Font.loadAsync({          ...FontAwesome.font,'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),        });      } catch (e) {        // We might want to provide this error information to an error reporting service        console.warn(e);      } finally {        setLoadingComplete(true);        SplashScreen.hideAsync();      }    }    loadResourcesAndDataAsync();  }, []);  return isLoadingComplete;}

navigation/index.tsx (Only relevant code is shown)

import { FontAwesome } from '@expo/vector-icons';function BottomTabNavigator() {  const colorScheme = useColorScheme();  return (<BottomTab.Navigator      initialRouteName="TabOne"      screenOptions={{        tabBarActiveTintColor: Colors[colorScheme].tint,      }}><BottomTab.Screen        name="TabOne"        component={TabOneScreen}        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({          title: 'Tab One',          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,          headerRight: () => (<Pressable              onPress={() => navigation.navigate('Modal')}              style={({ pressed }) => ({                opacity: pressed ? 0.5 : 1,              })}><FontAwesome                name="info-circle"                size={25}                color={Colors[colorScheme].text}                style={{ marginRight: 15 }}              /></Pressable>          ),        })}      /><BottomTab.Screen        name="TabTwo"        component={TabTwoScreen}        options={{          title: 'Tab Two',          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,        }}      /></BottomTab.Navigator>  );}/** * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ */function TabBarIcon(props: {  name: React.ComponentProps<typeof FontAwesome>['name'];  color: string;}) {  return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />;}

How to reproduce?

1. expo init
2. Choose third template (Typescript + examples)
3. When init is done, npm run ios