CODEWITHSUNDEEP
javascriptreactjsiconsnative
MacFlyer
MacFlyer

Reputation: 229

React native use vector icons

Im having trouble using icons from react-native-vector-icons package.

Here is how i import:

import MaterialIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import FoundationIcon from 'react-native-vector-icons/dist/Foundation';

Here is how i use:

<BottomNavigation
              labelColor="white"
              rippleColor="white"
              style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
              onTabChange={(newTabIndex) => {return} }
              >
                <Tab
                barBackgroundColor="#37474F"
                label="Movies & TV"
                icon={<MaterialIcon size={24} color="white" name="tv" />}
                />
                <Tab
                barBackgroundColor="#00796B"
                label="Music"
                icon={<FoundationIcon size={24} color="white" name="music" />}
                />
                <Tab
                barBackgroundColor="#5D4037"
                label="Books"
                icon={<FoundationIcon size={24} color="white" name="books" />}
                />
            </BottomNavigation>

Behaviour is: icons are displaying, but the wrong icons. Material displays as japanese symbol, Foundation as a square with an X in the middle.

How to correctly import and use those icons?

Upvotes: 0

Views: 492

Answers (2)

MacFlyer
MacFlyer

Reputation: 229

I needed to manualy link dependencies and rebuild project.

Upvotes: 0

Emanuel
Emanuel

Reputation: 31

in my projects I'm using the import as:

import Icon from 'react-native-vector-icons/Ionicons'

So try just import as:

import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import FoundationIcon from 'react-native-vector-icons/Foundation';

Sorry, can't comment 'cause of rep, hope it works.

Upvotes: 1

Related Questions