React 图标与 React 本机导航不兼容

Question

I want to use this icon from React icons= HiOutlineMenuAlt1 as my drawer icon in react native navigation. However i try to use as shown below it brings an error(see below) Note: This error happens with all icons when used in the navigation

Minimal sample repository

import { HiOutlineMenuAlt1} from "react-icons/hi";
<Drawer.Navigator
  screenOptions={({ navigation }) => ({
      headerLeft: () => <HiOutlineMenuAlt1 size={24} color="white" />,
  })
      ....
</Drawer.Navigator>

ERROR SHOWN

Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter.

Expected behavior

it should display an icon and no error should be shown

Answer 1

This library is incompatible with React Native. Try to use this for example https://github.com/oblador/react-native-vector-icons

Answer 2

May want to try this:

<Drawer.Navigator
  screenOptions={({ navigation }) => ({
      headerLeft: <HiOutlineMenuAlt1 size={24} color="white" />,
  })
      ....
</Drawer.Navigator>

But I agree with the other answer, you typically don't want to grab fonts from the web for mobile application. You want the fonts to come installed with the app, so you store it locally on the device.