Reputation: 21

Some react-native vector icons are not shown

I'm building an application and I have a problem with react-native icon. This is an image of the problem.

I followed this link and then I made sure the font is copied to android/app/src/main/assets/fonts, deleted the android/app/build folder. Finally I restarted react native package, but not throwing good result it such as first. How to fix this problem?

This is my code:

import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Right, Left, Thumbnail, Body, Text, Button, Icon } from 'native-base';

export default class SideMenu extends Component {
      render() {
        return (
          <Container style={{ flex:1, backgroundColor:'#fcfcfc' }}>
                  <Content>
                      <Body style={{ justifyContent: 'center' }}>
                          <Image style={{ position: 'relative'}}  source={require('../../../image/imac.jpg')}/>
                          <View style={bao.cover}>
                              <Thumbnail square source={require('../../../image/ava.jpg')} style={{borderRadius:40}}/>
                              <Text style={{ color:'#fff', flex:1, lineHeight:40, fontSize:18 }}> Vu Nguyen </Text>
                          </View>
                      </Body>
                      <Card>
                          <CardItem>
                              <Icon name="home" />
                              <Text>Home</Text>
                          </CardItem>
                          <CardItem>
                              <Icon name="news" />
                              <Text>Home</Text>
                          </CardItem>
                      </Card>
                  </Content>
          </Container>
        );
    }
}
const bao = StyleSheet.create({
    cover:{
      position:'absolute',
      flex: 1,
      flexDirection: 'row',
      marginLeft:30,
      top: 170
    }
})

Upvotes: 2

Answers (7)

Hakan

Reputation: 613

No longer need to link

Just Add following to app/build.gradle and re build and install again to your device.

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf','Ionicons.ttf' ] // Specify font files
]
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

Then run in cmd

cd android & gradlew assembleDebug && cd..
adb install android\app\build\outputs\apk\debug\app-debug.apk

adb reverse tcp:8081 tcp:8081
npx react-native start

Upvotes: 0

Krushita Bhanderi

Reputation: 32

try this

react-native link react-native-vector-icons

Upvotes: 0

Shahid Khan

Reputation: 21

If anyone is facing this issue please paste this line in your app/build.gradle and re-run the project.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Upvotes: 2

Ehsan Sarshar

Reputation: 3221

it's because native-base have some icons and some are not present.

so try to import the icon from it's original module instead of native-base

try this

import Icon from 'react-native-ionicons'

or other font libraries

import Icon from 'react-native-fontawesome'

instead of this

import { Icon } from 'native-base'

Upvotes: 1

Paul

Reputation: 529

I had a similar problem where the node_modules/react-native-vector-icons/glyphmaps/FontAwesome5Pro.json was outdated. I was trying to get the "bible" icon from FontAwesome v5.3.1, however resources from react-native-vector-icons still seem to be from 5.0. So a "?" was appearing.

I tried to npm install the latest version of react-native-vector-icons, but the problem persisted.

I manually copied the FontAwesome5Pro.json content from the Github repo. After restarting my simulator the question marks had become the icons I was looking for.

Upvotes: 1