Question 33239 in React native Question posted in
The official React Native documentation can be found here.

React icons Incompatible with react native navigation

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

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search