Ionicons show question mark

Please provide the following:

  1. SDK Version: 40.0.0
  2. Platforms(Android/iOS): both iOS and Android
  3. @expo/vector-icons": “^12.0.3”

So I am using the @expo/vector-icons package for icons. Unfortunately I am getting this in the screen.

This is my package.json file

{
  "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 my 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;

And I call it here

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 => {
  const [isLoading, setIsLoading] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [error, setError] = useState(false);
  const products = useSelector(state => state.products.availableProducts);
  const dispatch = useDispatch();

  
...

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 the node_modules folders and installed it again by typing

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

My Icons were working fine and suddenly, I got that problem. Any suggestions?

Thanks,
Theo.

Hey @theoaristi53, just so I can understand better this change happened without any upgrades or changes to the version of vector-icons? Could you share a reproducible example that I can run on my end?

Cheers,
Adam

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.