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

There are 2 options available for configure react-native-vector-icons to your Project :

1. With Linking (react-native < 0.60
2. Without Linking (react-native > 0.60)

If you want to go with Linking option you need to install react-native globally first, for that you can run below command to your terminal

npm install -g react-native-cli

this command will help you to install react-native globally to your machine, then after you'll able to link react-native-vector-icons library to your project as well any other library,

But I'll not recommend to go with this way, because react-native > 0.60 manages linking process by itself, so you don’t need to link libraries by your own,

Simply go through with the react-native-vector-icons documentation, and follow without linking way. react-native-vector-icons

Answer 2

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

Answer 3

You don't need any more to install react-native globally, you can use:

npx react-native link

https://reactnative.dev/docs/libraries

Answer 4

Just to add: react-native-paper is a good place for design, too. They have documentations about using vector icons in react.

https://callstack.github.io/react-native-paper/icons.html

Look under Getting Started for more information on using material-community icons.