androidreact-nativereact-native-vector-icons

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.

Solution

  • 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.