React native use vector icons

Question

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?

Emanuel · Accepted Answer · 2018-01-18 20:41:11Z

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.

MacFlyer · Accepted Answer · 2018-01-18 20:48:58Z

0

I needed to manualy link dependencies and rebuild project.

answered Jan 18, 2018 at 20:48

MacFlyer

2291 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

React native use vector icons

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related