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

[s2t2]

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!

[s2t2]

OK, so the manual strategy works at least. The weird part about the nrpm strategy is that it was working for me initially. I'm curious to hear if anyone knows why this would no longer be the case.

[sankhadeeproy007]

It is very strange indeed. If you're sure that changing the base font family was responsible for it, it might be a problem with native-base. With rnpm, it's common for the icons to not work for the first time. However restarting the packager usually fixed the problems. I'll keep it open for a while and see if others have faced the same issue.

[s2t2]

Thanks for your attention @sankhadeeproy007 :-)

[rkmax]

I'm facing the same error. I tried only the rnpm strategy without success

[s2t2]

I think I read that in the very latest version of react native, you can run
react-native link as an alternative to using rnpm. I did this for another
library yesterday and it worked fine. I'm curious if this will solve the
issue here. Want to give it a shot?

On Jul 25, 2016 9:24 PM, "Julian Reyes Escrigas" [email protected]
wrote:

I'm facing the same error. I tried only the rnpm strategy without success

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/76#issuecomment-235057116,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABRGpx-GVCxNu8nTbNYFC7lrDZz5EczYks5qZQ1jgaJpZM4JTpqC
.

[rkmax]

I've tested with rnpm link and react-native link without success. the only that is working is the manual entry

// android/app/build.gradle
...
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
...

[hugoserrana]

I think that you have to especify package to link on react native:
Run react-native link react-native-vector-icons

This works on react-native 0.32.0

[hugoserrana]

After run the command, try open Android Studio, clean and rebuild project, check if the project vector-icons will be avaliable after file index finish.

Check the version of gradle plugin too.

[aloifolia]

For me, react-native link react-native-vector-icons almost worked with React Native 0.47. When I tried to build the app, I ran into a new error:
````
/[project_path]/node_modules/react-native-vector-icons/android/src/main/java/com/oblador/vectoricons/VectorIconsPackage.java:26: error: method does not override or implement a method from a supertype
@Override
^
1 error
:react-native-vector-icons:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.
````

I just deleted the method (it does not seem to exist on 0.47 anymore) and now it works. You should fix this problem.

[yangqingxian]

I tried all the suggestions,none of them works.OMG!

[mtebele]

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

[sytolk]

I've tested with rnpm link and react-native link without success. the only that is working is the manual entry

// android/app/build.gradle
...
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
...

this works with RN v.60 and autolinking