vector-icons/FontAwesome5 在 react-native 上显示错误的图标

Question

On ReactJS I can show the icon by using it's name taken from this website: https://fontawesome.com/icons?d=gallery&q=eye&m=free

As you can see, if you search by eye, you'll have a lot of options there, and if you click on the icon it will show you what name you should use to call that icon. For example: fas fa-eye will render a solid eye and far fa-eye will render a regular eye.

The problem is that on react-native I can't call the icon name like this, it won't accept, so I have to just use the word eye , but this limits me by a random eye that's not from my choice. So I wanna know if there's any way that I can pick the icon that I want just like in ReactJS? This is how I'm currently using the fontawesome icons on react-native:

import FontAwesome from 'react-native-vector-icons/FontAwesome5';

...

return <FontAwesome name={'eye} style={props.customStyle} />

The showed icon appears on the website's list, but as I said, there's more than one icon with the same name and I want be able to choose bettween then.

Answer 1

For those that are struggling into this problem, just add the solid or light tag into your component and it will change the icon, example:

return <FontAwesome name={'eye'} style={props.customStyle} solid />

Answer 2

you can try to use IconDefinition and choose icons by their names.

import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
  
        <FontAwesomeIcon
            icon={faBookOpen}
            size={28}
          />