Please provide the following:
- SDK Version: 40.0.0
- Platforms(Android/iOS): both iOS and Android
- @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.