title: Why are my react icons not functioning properly?
body: <p>attached is the code below for a little app I am making with React Native. I was trying to use react icons but for some reason they are not working and idk why. I imported them and everything and they should be working but I keep getting this error. <a href="https://i.stack.imgur.com/aoovg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aoovg.jpg" alt="enter image description here" /></a> Does anyone know why my react icons are not functioning properly? Thanks in advance.</p>
  <pre><code>import { View, Text, SafeAreaView, Image } from 'react-native';
  import React, { useLayoutEffect } from 'react';
  import { useNavigation } from '@react-navigation/native';
  import { FaBeer } from 'react-icons/fa';
  
  const HomeScreen = () =&gt; {
      const navigation = useNavigation();
  
      useLayoutEffect(() =&gt; {
              navigation.setOptions({
                  headerShown: false,
              });
      }, []);
  
    return (
      &lt;SafeAreaView&gt;
          &lt;Text className=&quot;text-red-500&quot;&gt;
              &lt;View className=&quot;flex-row pb-3 items-center mx-4 space-x-2&quot;&gt;
                  &lt;Image
                      source={{
                          url:&quot;https://links.papareact.com/wru&quot;,
                      }}
                      className=&quot;h-7 w-7 bg-gray-300 p-4 rounded-full&quot;
                  /&gt;
          
                  &lt;View&gt;
                      &lt;Text className=&quot;font-bold text-gray-400 text-xs&quot;&gt;
                          Deliver Now
                      &lt;/Text&gt;
                      &lt;Text className=&quot;font-bold text-xl&quot;&gt;Current Location
                          &lt;FaBeer /&gt;
                      &lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/Text&gt;
      &lt;/SafeAreaView&gt;
    );
  };
  
  export default HomeScreen;
  
  </code></pre>