CODEWITHSUNDEEP
androidreact-native
Esmatullah Arifi
Esmatullah Arifi

Reputation: 852

React-native vector icons shown as question mark

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

Upvotes: 8

Views: 21857

Answers (5)

outside2344
outside2344

Reputation: 2105

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

Upvotes: 1

FontFamily
FontFamily

Reputation: 386

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!

Upvotes: 1

Awad Haj
Awad Haj

Reputation: 629

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

Upvotes: 11

YaSh Chaudhary
YaSh Chaudhary

Reputation: 2725

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.

Upvotes: 6

Shadow_m2
Shadow_m2

Reputation: 397

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 !

Upvotes: 3

Related Questions