CODEWITHSUNDEEP
react-nativereact-native-navigationreact-icons
louis
louis

Reputation: 703

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

Upvotes: 2

Views: 197

Answers (2)

Shah
Shah

Reputation: 2854

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.

Upvotes: 0

Kirill Novikov
Kirill Novikov

Reputation: 3067

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

Upvotes: 1

Related Questions