reactjs - Expo Icons show question marks

Question

So I have asked this question previously, but I will describe my issue better so I can get a solution. I am using the @expo/vector-icons package. Unfortunately, the icons don't show as they should.

First I will share my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.3",
    "@react-native-community/masked-view": "^0.1.10",
    "expo": "~40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "^9.0.0",
    "expo-linear-gradient": "^8.4.0",
    "expo-status-bar": "~1.0.3",
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "^2.16.1",
    "react-native-vector-icons": "^8.0.0",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-navigation-header-buttons": "^6.0.0",
    "react-navigation-stack": "^2.10.2",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "redux-devtools-extension": "^2.13.8"
  },
  "private": true
}

Now I am using the @expo/vector-icons package in a custom component

import React from 'react';
import { Platform } from 'react-native';
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from '@expo/vector-icons';

import Colors from '../../constants/Colors';

const CustomHeaderButton = props => {
    return <HeaderButton 
        {...props} 
        IconComponent={Ionicons} 
        iconSize={23} 
        color={Platform.OS === 'android' ? 'white' : Colors.primary}
    />
};


export default CustomHeaderButton;

Now I call this custom component in another one.

import React, { useEffect, useState, useCallback } from 'react';
import { View, FlatList, StyleSheet, Platform, Button, ActivityIndicator, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import * as cartActions from '../../store/actions/cart';
import ProductItem from '../../components/shop/ProductItem';
import HeaderButton from '../../components/UI/HeaderButton';
import Colors from '../../constants/Colors';
import * as productsActions from '../../store/actions/products';

const ProductsOverviewScreen = props => {
  ...
ProductsOverviewScreen.navigationOptions = navData => {
  return {
    headerTitle: 'All Products',
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
          onPress={() => {
            navData.navigation.toggleDrawer();
          }}
        />
      </HeaderButtons>
    ),
    headerRight:() => (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Cart"
          iconName={Platform.OS === 'android' ? 'md-cart' : 'ios-cart'}
          onPress={() => {
            navData.navigation.navigate('Cart');
          }}
        />
      </HeaderButtons>
    )
  };
};

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

export default ProductsOverviewScreen;

I removed and re-installed the node_modules folder

rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force &&  npm install

and run it

expo r -c

but still nothing. Any suggestions? Everything was working fine, but I got this all of a sudden.

Thanks, Theo

question from:https://stackoverflow.com/questions/65868743/expo-icons-show-question-marks

Answer 1

To solve this I had to do the following

1. Remove expo-font from node-modules/expo/node-modules/expo-font/

2. Remove the expo-font dependency from node-modules/expo/node-modules/package.json

3. Run expo r -c

Hopefully, this might help someone.