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"/>