Icons not displaying properly when installing via nrpm strategy- seeing [X] instead

I’m using this library and Android Studio to build a react-native android app. Initially, react-native-vector-icons were displaying properly as a result of the rnpm link installation strategy. Then I renamed one of the font files (Comic Sans MS), and the icons stopped displaying properly.

I attempted to fix the issue by removing the android/app/src/main/assets/fonts and android/app/build directories, uninstalling and re-installing this library and peer dependencies. But the icons are still not displaying properly.

I thought the problem only applied to my project’s directories, so I created an entirely new react-native application from scratch, created a new Android Virtual Device, re-installed this library and peer dependencies, but the icons are still not displaying properly. I’m confused by this result.

Please advise. Thank you for your time.

See also: https://github.com/oblador/react-native-vector-icons/issues/233

[s2t2]

Reproduction Instructions

Testing React Native boilerplate

Initialize a new react-native application:

react-native init MyNativeApp
cd MyNativeApp/

Use Android Studio to start a new Android Virtual Device (AVD) according to the following specs:

• Android SDK Build Tools 23.0.1
• Nexus 5 Device
• Marshmellow 23 x86 OS

Run the react-native packager.

react-native run-android

The boilerplate application shows up in the AVD as expected.

Testing Native-Base

Shut down the packager and the AVD.

Install native-base.

npm install native-base --save

Edit index.android to use native-base components:

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

class MyNativeApp extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My Native App!</Title>
        </Header>

        <Content>
          <Text>Hello world.</Text>
        </Content>

        <Footer>
          <Button>Press me!</Button>
        </Footer>
      </Container>
    );
  }
}

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

Start the AVD and then the packager to see if native-base components are working:

react-native run-android

The components are showing up as expected.

Testing Icons

Shut down the packager and the AVD.

Edit index.android.js, just the button:

// ...
<Button>
  <Icon name="ios-radio-outline" />
</Button>
// ...

Start the AVD and then the packager to see if the icon is working. As expected, it is not, because the icon assets have not yet been installed.

Shut down the packager and the AVD.

Copy the project directory a few times and apply each of the strategies below using a different copy…

Asset Installation Strategy A (via rnpm)

Per the native-base instructions related to Android using rnpm, install react-native-vector-icons:

rnpm link

This creates a new directory called android/app/src/main/assets/fonts which contains some font files.

Start the AVD and then the packager to see if the icon is working. Unfortunately it is not.

Asset Installation Strategy C (manually)

According to the manual instructions:

mkdir -p android/app/src/main/assets/fonts
cp -rf node_modules/react-native-vector-icons/Fonts/ android/app/src/main/assets/fonts/

Edit android/settings.gradle:

rootProject.name = 'MyNativeApp'

include ':app'

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Edit android/app/build.gradle:

// ...
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-vector-icons')
}
// ...

Start the AVD and then the packager.

Success!

[mtebele]

1. Close the packager.
2. react-native link react-native-vector-icons
3. cd android/ && ./gradlew clean && cd .. && react-native run-android