How to use material community icons with react-native-vector-icons

Question

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.

Answer 1

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" />