React-native-vector-icons not working in ios #1604

shubhanshubb · 2024-03-20T13:33:01Z

"I'm currently working on a React Native project (version 0.73.2) and encountering an issue with react-native-vector-icons integration. Despite following the installation steps (npm install --save react-native-vector-icons followed by pod install), the RNVectorIcons library does not seem to be added to my Podfile.lock or properly linked in my Xcode project. Auto-linking should work with my React Native version, but it appears to be missing. Is there a known issue or step I'm overlooking for React Native 0.73.2?"

tarangshah19 · 2024-04-01T04:33:12Z

have you found any solution for this yet?

durandt · 2024-04-25T14:36:58Z

Similar issues reported on this older issue #1317 (though I think it is better that you created a new issue).

I am working on a fresh new react-native app and icons were working just fine. I just stumbled upon this problem after i ran pod install and the output contained:

Removing RNVectorIcons

My package.json

  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-vector-icons": "^10.0.3"
  },

The project was created by my Android-colleague. Then I cloned our project on my mac and went though the installation steps for react-native-vector-icons (adding the Fonts to the iOS project file) and the icons were working fine.
Until now when I ran pod install and it removed RNVectorIcons.

I added RNVectorIcons to my ios/Podfile and re-ran pod install and it is working again.

target 'MyApp' do
  config = use_native_modules!

  use_react_native!(
    # ....
  )

  target 'MyAppTests' do
    # ....
  end

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  post_install do |installer|
    # ....
  end
end

I cannot see that it would have been there in my git history.

I wonder:

Is npm install react-native-vector-icons supposed to add RNVectorIcons to the Podfile?
Or is the pod added another way?
How is cocoapods supposed to know it should add RNVectorIcons?
May XCode or something else have added RNVectorIcons to the Podfile on the first build (which would explain why it worked to begin with) but somehow did not save the file?
I could also have inadvertently removed the changes to the Podfile after install (though I don't think I did)

johnf · 2024-04-27T00:27:07Z

@durandt You should not need to add anything to the Podfile. cocapods should detect the podspec in the node_modules package.

Are using able to share your entire Podfile?

durandt · 2024-04-27T08:09:32Z

@johnf sure:

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'MyApp' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'MyAppTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
  end
end

Git history says file hasn't changed since it was created with npx react-native@latest init MyApp around April 11th. (react native version would have been 0.73.6)

anastobe · 2024-05-06T11:47:48Z

same issue counter any solution?

eko9x9 · 2024-05-22T18:52:46Z

Similar issues reported on this older issue #1317 (though I think it is better that you created a new issue).

I am working on a fresh new react-native app and icons were working just fine. I just stumbled upon this problem after i ran pod install and the output contained:

Removing RNVectorIcons

My package.json
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-vector-icons": "^10.0.3"
  },
The project was created by my Android-colleague. Then I cloned our project on my mac and went though the installation steps for react-native-vector-icons (adding the Fonts to the iOS project file) and the icons were working fine. Until now when I ran pod install and it removed RNVectorIcons.

I added RNVectorIcons to my ios/Podfile and re-ran pod install and it is working again.
target 'MyApp' do
  config = use_native_modules!

  use_react_native!(
    # ....
  )

  target 'MyAppTests' do
    # ....
  end

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  post_install do |installer|
    # ....
  end
end
I cannot see that it would have been there in my git history.

I wonder:

Is npm install react-native-vector-icons supposed to add RNVectorIcons to the Podfile?

Or is the pod added another way?

How is cocoapods supposed to know it should add RNVectorIcons?

May XCode or something else have added RNVectorIcons to the Podfile on the first build (which would explain why it worked to begin with) but somehow did not save the file?

I could also have inadvertently removed the changes to the Podfile after install (though I don't think I did)

tanks it's work

emil-malmgaard-rasmussen · 2024-05-23T19:33:04Z

I have the same Issue.

Tried installing React-Native-Vector-Icons 10.0.3 in my RN 0.72 project. worked fine, but when I run the same version in RN version 0.73.6, it tells me the same as @durandt:
Downloading dependencies Removing RNVectorIcons

I also tried newest version: 10.1.0 - Also no luck with RN version 0.73.6

johnf · 2024-06-10T14:07:27Z

Unfortuntely I'm unable to replicate this. If someone can share a git repo or send me something privately I'll be happy to debug

l3utterfly · 2024-06-12T03:04:59Z

Same issue with latest react-native-vector-icon and RN 0.74.2

Confirm @durandt 's manual update to Podfile fixes it: #1604 (comment)

crico · 2024-08-14T17:18:06Z

Same issue with latest react-native-vector-icon and RN 0.74.2

Confirm @durandt 's manual update to Podfile fixes it: #1604 (comment)

By adding that line to the Podfile, it's installed, but then when building the App, I get the error: 'error: Multiple commands produce '/path/of/the/project/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/Zocial.ttf':'.

What's the correct way to configure it?

I'm using these versions:

"react": "18.2.0",
"react-native": "0.74.5",
"react-native-vector-icons": "^10.1.0"

singhJasvinder101 · 2024-08-16T16:55:02Z

getting the same issue

      "react": "18.3.1",
      "react-native": "^0.75.1",
      "react-native-vector-icons": "^10.1.0"

dpitre · 2024-08-28T14:08:14Z

I don't know if this will help any of you.

I upgraded to expo 51 and installed @react-native/assets-registry and all my assets and icons stopped working.

I removed the dependency on @react-native/assets-registry and all of my stuff starting working again.

"@expo/vector-icons": "^14.0.0",
"expo": "^51.0.31",
"react-native": "0.74.5",

Here is where I got a clue:
https://x.com/hirbod_dev/status/1798178985463181598?s=46&t=BJ6679qzsf66cZNyHJdrlA

MelMayssonOwen · 2024-08-30T16:45:32Z

Same issue, anyone found a fix ? Sometimes it works on simulator but not on device for FontAwesome6

"expo": "^51.0.0", "react-native": "0.74.5", "react-native-vector-icons": "^10.1.0",

jbrodriguez · 2024-09-01T23:15:06Z

this was happening to me because i had a "leftover" (?) react-native.config.js which disabled react-native-vector-icons for ios
remove this file if it looks like this and you're gettint rnvi removed during pod install

module.exports = {
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

MelMayssonOwen · 2024-09-02T14:00:38Z

Any fix ?
I'm having some issues with certain icons after updating react native

shubhanshubb · 2024-09-02T14:02:27Z

ALready fixed

crico · 2024-09-03T07:34:29Z

ALready fixed

what is the fix?

MelMayssonOwen · 2024-09-03T08:30:53Z

the only icons that work reliably for me are fontAwesome6

I’m on the latest version and tried every fix

haswalt · 2024-09-05T17:03:52Z

Definately not fixed. Using 10.1.0 on ReactNaive 0.75.2

carlosxfelipe · 2025-01-22T03:18:35Z

error Multiple commands produce '/Users/carlos/Library/Developer/Xcode/DerivedData/NavigationApp-csomqekbcehsjyeqvgwvsukhfqub/Build/Products/Debug-iphonesimulator/NavigationApp.app/Ionicons.ttf'
node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Error: Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'NavigationApp.xcworkspace'.".] {
code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.11.0
Failed to run the simulator: Command failed: react-native run-ios --simulator="iPhone 16 Pro"
carlos@Carloss-Air-2 NavigationApp %

my public repo:
https://github.com/carlosxfelipe/rn-navigation-app

ANDROID works! iOS (Simulator) doesn't!!

damdafayton · 2025-03-11T21:40:37Z

why is this closed? still same problem. doesnt work on ios. only '@react-native-vector-icons/fontawesome and '@react-native-vector-icons/material-icons'` work

sofiacoder3000 · 2025-03-17T04:39:25Z

I have the same problem. All workink OK for ANDROID, but don't working for ios.

"react": "18.3.1",
"react-native": "0.76.0",
"react-native-sqlite-storage": "^6.0.1",
"react-native-vector-icons": "^10.2.0"

My repo : https://github.com/sofiacoder3000/tasks-manager-react-native

sofiacoder3000 · 2025-03-17T04:40:18Z

Lamentablemente, no puedo replicar esto. Si alguien puede compartir un repositorio de Git o enviarme algo por privado, con gusto lo depuraré.

hi 👋 , I have the problem. This is my repo: https://github.com/sofiacoder3000/tasks-manager-react-native

Arun-paramasivam · 2025-04-06T18:59:28Z

Im facing the same issue "Error: Unable to resolve module react-native-vector-icons/ionicons"

"dependencies": {
"@react-native-async-storage/async-storage": "^2.1.2",
"@react-navigation/native": "^7.0.19",
"@react-navigation/native-stack": "^7.3.3",
"axios": "^1.8.4",
"react": "19.0.0",
"react-native": "0.78.1",
"react-native-safe-area-context": "^5.3.0",
"react-native-screens": "^4.9.2",
"react-native-vector-icons": "^10.0.3" // didn't work in 10.2.0 too, hence downgraded
},

MDSADABWASIM · 2025-05-09T10:29:56Z

This is how I fixed the issue with:

    "react-native": "^0.75.5",
    "react-native-vector-icons": "^10.2.0"

I noticed that earlier for workaround we've added this line in our Podfile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

Removing this line fixed the issue for me.

shubhanshubb mentioned this issue Mar 20, 2024

React native 0.73 fails to build release #1584

Closed

alordiel mentioned this issue Apr 1, 2024

Wrong Icons Showing #1602

Closed

johnf added the waiting Waiting on OP response label Jun 10, 2024

shubhanshubb closed this as completed Sep 2, 2024

MelMayssonOwen mentioned this issue Oct 30, 2024

iOS not showing up any icons on new version #1674

Closed

Uh oh!

React-native-vector-icons not working in ios #1604

React-native-vector-icons not working in ios #1604

Comments

shubhanshubb commented Mar 20, 2024

tarangshah19 commented Apr 1, 2024

Uh oh!

durandt commented Apr 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

johnf commented Apr 27, 2024

Uh oh!

durandt commented Apr 27, 2024

Uh oh!

anastobe commented May 6, 2024

Uh oh!

eko9x9 commented May 22, 2024

Uh oh!

emil-malmgaard-rasmussen commented May 23, 2024

Uh oh!

johnf commented Jun 10, 2024

Uh oh!

l3utterfly commented Jun 12, 2024

Uh oh!

crico commented Aug 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

singhJasvinder101 commented Aug 16, 2024

Uh oh!

dpitre commented Aug 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MelMayssonOwen commented Aug 30, 2024

Uh oh!

jbrodriguez commented Sep 1, 2024

Uh oh!

MelMayssonOwen commented Sep 2, 2024

Uh oh!

shubhanshubb commented Sep 2, 2024

Uh oh!

crico commented Sep 3, 2024

Uh oh!

MelMayssonOwen commented Sep 3, 2024

Uh oh!

haswalt commented Sep 5, 2024

Uh oh!

carlosxfelipe commented Jan 22, 2025

Uh oh!

damdafayton commented Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sofiacoder3000 commented Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sofiacoder3000 commented Mar 17, 2025

Uh oh!

Arun-paramasivam commented Apr 6, 2025

Uh oh!

MDSADABWASIM commented May 9, 2025

Uh oh!

durandt commented Apr 25, 2024 •

edited

Loading

crico commented Aug 14, 2024 •

edited

Loading

dpitre commented Aug 28, 2024 •

edited

Loading

damdafayton commented Mar 11, 2025 •

edited

Loading

sofiacoder3000 commented Mar 17, 2025 •

edited

Loading