React-native vector icons shown as question mark

Issue

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);

Solution

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.

Answered By - YaSh Chaudhary