expo / vector-icons

https://icons.expo.fyi
MIT License
671 stars 116 forks source link

Icons not showing up anymore #301

Closed aymanMFD closed 6 months ago

aymanMFD commented 6 months ago

Previously the icons showed up without any problems, however now the icons doesn't work

This is the code:

import { FontAwesome6 } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
// more code

function TabScreen() {
  return (
    <Tab.Navigator initialRouteName="Home"  screenOptions={({route}) => ({
      headerShown: false,
      tabBarInactiveTintColor: 'gray',
      tabBarActiveTintColor: '#00205E',
      tabBarIcon: ({color }) => {

        if (route.name === "Home") {
          return <FontAwesome6 name="house" size={20} color={color} />
        } else {
          return <MaterialIcons name="settings" size={24} color={color} />
        }
      }
    })} >
        <Tab.Screen name="Home" component={HomePage} />
        <Tab.Screen name="Settings" component={SettingsPage} options={{headerShown: true, headerShadowVisible: false}}/>
    </Tab.Navigator>
  )
}
CobbyWS commented 6 months ago

I'm experiencing the same issue. The icons are displaying properly on Android but on iOS, 90% of them are displaying a square with a question mark in it.

It started when I upgraded from Expo version 50 to 51 and React Native 73 to 74.

An example of one that is showing the square with a question mark is FontAwesome5 arrow-left.

imchivaa commented 6 months ago

Try this

npm install expo@latest npx expo install --fix

Miloua91 commented 6 months ago

Try and install @react-native/assets-registry and add --clear flag when you start expo server if it doesn't work try changing your babel.config like this

aymanMFD commented 6 months ago

I tried both npm install expo@latest npx expo install --fix and npm install react-native/assets-registry and it fixed the issue thanks a lot guys