react-native-vector-icons/Feather Icon 总是“？”

Question

Good Morning, I'm trying to use library https://github.com/oblador/react-native-vector-icons#installation

import Icon from 'react-native-vector-icons/Feather';

After I installed it and followed every step of installation

I tried to run it with expo with this code:

function BottomTabNavigator1() {
  return (
    <Tabs.Navigator
        tabBarOptions={
            {
            activeTintColor: "#2F7C6E",
            inactiveTintColor: "#222222"
            }
        }
        apperance={
            {
                whenInactiveShow : "both"
            }
        }
    >

    <Tabs.Screen name="HomeScreen" component={HomeScreen}
    options={
        {
            tabBarIcon: ({ focused, color, size }) => (
                <Icon
                    name="Home"
                    size={size ? size : 12}
                    color={focused ? color : "#222222"}
                    focused={focused}
                    color={color}
                />
            )
        }
    }
    />
    <Tabs.Screen name="DefaultScreen" component={DefaultScreen}
    options={
        {
            tabBarIcon: ({ focused, color, size }) => (
                <Icon
                    name="Rocket"
                    size={size ? size : 12}
                    color={focused ? color : "#222222"}
                    focused={focused}
                    color={color}
                />
            )
        }
    }
    />
  </Tabs.Navigator>
  )
}

No error messages appeared, but the and 'Home" won't show off, only shown on expo view as image '?' Am I missing something? help please

Answer 1

I think react-native-vector-icons doesn't support Expo as that package needs native modules to be linked which isn't supported in an Expo project unless you eject.

You can use @expo/vector-icons as an alternative instead.

According to its docs:

This library is a compatibility layer around @oblador/react-native-vector-icons to work with the Expo asset system.

In your case you can do the following:

Replace:

import Icon from 'react-native-vector-icons/Feather';

<Icon
  name="Home"
  size={size ? size : 12}
  color={focused ? color : "#222222"}
  focused={focused}
  color={color}
/>

With:

import { Feather } from '@expo/vector-icons';

<Feather
  name="home"
  size={size ? size : 12}
  color={focused ? color : "#222222"}
  focused={focused}
  color={color}
/>

You may need to run:

npm i @expo/vector-icons

Here is a snack to see the result: https://snack.expo.io/@dcangulo/2e6e4e