React-native vector icons shown as question mark

Question

I have installed react-native v0.46 and installed NativeBase along with but after using tag in components, no icon displayed instead question mark is displayed (Android and not tested in iOS).

To solve this issue I did lots of modifications listed as follow:

1. rnpm link
2. react-native link react-native-vector-icons
3. NativeBase installation guide: https://nativebase.io/docs/v0.3.0/getting-started
4. https://github.com/oblador/react-native-vector-icons
5. My json package file: { "name": "Magazine", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "native-base": "^2.3.1", "react": "16.0.0-alpha.12", "react-native": "0.46.4", "react-native-image-slider": "^1.1.5" }, "devDependencies": { "babel-jest": "20.0.3", "babel-preset-react-native": "2.1.0", "jest": "20.0.4", "react-test-renderer": "16.0.0-alpha.12" }, "jest": { "preset": "react-native" } }
6. And the component where i used these icons: ios-arrow-left & navicon

I am using Windows 10, Node v8.1.4, React-native-CLI v2.0.1

code:

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import {Container, Header, Title, Button, Icon} from 'native-base';

export default class CityMagazine extends Component {
  render() {
    return (
        <Container>
          <Header>
            <Button transparent>
              <Icon name="ios-arrow-left" />
            </Button>

            <Title>Header</Title>

            <Button transparent>
              <Icon name="navicon"/>
            </Button>
          </Header>
        </Container>
    );
  }
}

AppRegistry.registerComponent('CityMagazine', () => CityMagazine);

Answer 1

Vector icons are composed of many libraries as known, so you may need to specify which library you are using by setting type property of Icon like this:

<Icon type="EvilIcons" name="navicon"/>

Answer 2

First of all check if vector icon package is linked or not using

react-native link react-native-vector-icons

If linked then run command:

react-native run-android

This command will completely install vector icons package in your project.

UPDATE: The issue was ios-arrow-left was not in directory of vector icons, its name is now ios-arrow-back .

Answer 3

I've had the same problem but following these steps saved me.

NOTE: Type all of the commands in your project root directory.

1- enter command: npm install --save react-native-vector-icons to install the package

2- enter command: react-native link

3- Stop packaging server and run it again by: npm start

4- Rebuild android version by command: npm run android

The last step will try to download some of dependencies needed for react-native-vector-icons and you'll be good to go !

Answer 4

Make sure you are using the correct icon name. You can look at the.json files to confirm, for example for MaterialIcons:

https://github.com/oblador/react-native-vector-icons/blob/4b9123212517d4e11b5cec89a81794854f7f326b/glyphmaps/MaterialIcons.json#L54-L56

Answer 5

I had a similar problem and followed the steps above. What made it work for me was rebuilding the pod with a terminal window. In MacOS, I opened a terminal window and ran the following commands:

cd ios (once you are in your project directory) pod install

I refreshed the XCode simulator and voila!