React "view config getter callback component 'path' must be function (received 'undefined')"

I can't get a react icon inside my react app. I can import the font awesome icon just fine, but whenever I try using the icon, my app crashes. I've tried dozens of answers from stack overflow and other websites and none of those have helped. Can some help me with this? Here's my App.js

import { StyleSheet, Text, View } from 'react-native';
import { FaArrowLeft } from "@react-icons/all-files/fa/FaArrowLeft";

export default function App() {
  return (
      <View style={styles.container}>
        <Text>
          Main <FaArrowLeft />
        </Text>
        <StatusBar style="auto" />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'skyblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The error that shows up on the mobile app is:
view config getter callback component 'path' must be function (received 'undefined')

And the first couple lines of the error that shows up on vs code is:

Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/Dakota/Mobile/Recifeed/node_modules/react-native/index.js: 

None of these files exist:
  * node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  * node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
  16 | import typeof Button from './Libraries/Components/Button';
> 17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
     |                                   ^
  18 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
  19 | import typeof FlatList from './Libraries/Lists/FlatList';
  20 | import typeof Image from './Libraries/Image/Image';
    at ModuleResolver.resolveDependency (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
    at DependencyGraph.resolveDependency (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at Object.resolve (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/Dakota/Mobile/Recifeed/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)

The most common resolution is running 'npm start --clean-cache' but that doesn't work for me

You cannot use @react-icons/all-files nor react-icons in React Native. They render web-native <svg> tags which won't work in RN. If you want icons in RN they you might consider looking into either

• react-native-vector-icons (If you have a bare React Native project)
• @expo/vector-icons (For an expo managed application)

These are different from the web React's version (react-icons) & render native components for each platform instead of an <svg>.