I am trying to use the store-front icon in material community icons. However I get an error and it doesn't display the icon. This is my code:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import Products from "./src/components/Products";
import Cart from "./src/components/Cart";
import Account from "./src/components/Account";
const Tab = createMaterialBottomTabNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Browse"
activeColor="#f0edf6"
inactiveColor="#A3A3A3"
barStyle={{ backgroundColor: "#515151" }}
>
<Tab.Screen
name="Browse"
component={Products}
options={{
tabBarLabel: "Browse",
tabBarIcon: ({ color }) => (
<Icon name="storefront-outline" color={color} size={26} />
),
}}
/>
<Tab.Screen name="Cart" component={Cart} />
<Tab.Screen name="My Account" component={Account} />
</Tab.Navigator>
</NavigationContainer>
);
}
}
I have installed the vector icons library and other icons from Ionic for example work.
EDIT:
I think I need to link react-native to react-native-vector-icons but I get an error saying The term 'react-native' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
EDIT 2: I think it is just some Material Community Icons that I am unable to access including "storefront-outline" and "store-front". Maybe they've been deprecated but still exist when you search for store? Thanks for everyone's help but I will just use an alternative icon for my situation as I have already gone through all the stems in the vector icons documentation.
Follow the below steps -
Step - 1: Import the icon family
import { MaterialCommunityIcons } from '@expo/vector-icons';
Step - 2: Render the component
<MaterialCommunityIcons name="access-point" size={24} color="black" />