CODEWITHSUNDEEP
androidreact-nativereact-native-vector-icons
Jo Momma
Jo Momma

Reputation: 1307

React-native-vector-icons gives me a different icon than is listed in it's directory

I'm using react-native-vector-icons in my app. Everything was fine when I was using React-Native 6.2.1. I upgraded to 6.3.0 today. Now all my icons are messed up. I figured the names have changed. I played around with the directory today and got strange results. Here is where I'm getting the listings from: https://oblador.github.io/react-native-vector-icons/

If I pick one with the name "ios-call" it's supposed to show a phone icon, but instead I'm getting an email icon. Some of the icons don't show at all. Others are not effected. I use them in my app like this:

import Ionicons from "react-native-vector-icons/Ionicons";

<Ionicons name='call' size={24} style={{marginRight: 15}}/>

This is really screwing my deadline. Why does this platform always seem erratic with it's changes and upgrades?

Has anyone else had this problem, and if so, can you tell me where to look for a fix?

Thanks in advance.

Upvotes: 1

Views: 3560

Answers (4)

Ali Ali El-Dabaa
Ali Ali El-Dabaa

Reputation: 127

check this solution from the original repo. It worked for me.

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

Follow the steps in this link to know where to add it:

https://github.com/oblador/react-native-vector-icons#wrong-icons-are-shown-after-upgrading-this-package

and -as a default- select the icon names from MaterialCommunityIcons section in the react-native-vector-icons directory below:

https://oblador.github.io/react-native-vector-icons/

If you want to use another section, follow the steps here:

https://stackoverflow.com/a/47456215/15526921

Upvotes: 0

Julio de Leon
Julio de Leon

Reputation: 1212

I've also encounter this issue, I'm using Ionicon but it doesn't show the right Icon. I saw ionicons.tff last update is 2 months ago, so probably we have an outdated icon. The way I fix it is by re-installing react-native-vector-icons.

npm install --save react-native-vector-icons

It updates the package, then I manually link it.

react-native link react-native-vector-icons

then re run

npx react-native run-android.

Upvotes: 2

Jo Momma
Jo Momma

Reputation: 1307

Thank you @apgso for your input. I actually figured out how to fix the problem. I still haven't fully grasped the bundling process. If I start my app via xCode, it will fire up the metro bundler and my app will have the correct assets.

I think, Android Studio works differently, With AS I have to first start the metro bundler with the command "react-native start" and then I'm not sure exactly how this works.

  1. After the metro bundler is started up, I can type in the command "react-native run-android" and I think I get the latest assets/code.
  2. If I hit the play button on AS it fires up the app too.

The problem is I get mixed results all the time. Half the time my code is being cached and I'm getting old code. Sometimes, with the metro bundler running in the background, and AS not started yet, I can get away with running "react-native run-android" and it appears to work.

It's all very confusing to me. I have spent a lot of time trying to fix something only to find out I'm not running the latest version of my code.

So in conclusion, I fixed my problem by shutting everything down and restarting metro and my app. I can't tell you why I was getting different icons instead of no icon. React Native development is very finicky.

If anyone can clear this stuff up I will mark them as the correct answer.

Upvotes: 0

apgsn
apgsn

Reputation: 751

I think your versions are messed up, you went from 0.62.1 to 0.63.0, right? Because I had the same issue after this upgrade.

The solution was to clear the RN cache and reinstall all dependencies.

  1. Clear cache
  2. Reinstall node modules and pods in your project folder:
rm -rf node_modules && rm package-lock.json
npm i
cd ios && pod install && cd ..

Upvotes: 0

Related Questions