Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"getImageSource" returns the same path for different icon source

See original GitHub issue

Review the documentation: https://github.com/oblador/react-native-vector-icons
Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 645.06 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.20.1/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.20.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6200805
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.7 - /Users/ericschaal/.sdkman/candidates/java/current/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    react: 16.13.1
    react-native: 0.63.1
    react-native-vector-icons: 7.0.0

Description

On iOS: Calling getImageSource multiple times with a different icon source always return the same path. If this is expected behaviour how can we get the source (.PNG) of multiple icons?

On Android: Not tested

Reproducible Demo

import MaterialIcons from "react-native-vector-icons/MaterialCommunityIcons";

  const loaded = await Promise.all([
    MaterialIcons.getImageSource("menu", 22),
    MaterialIcons.getImageSource("close", 22),
    MaterialIcons.getImageSource("forum", 22),
  ]);
console.log(loaded)

Output


[
{uri: "/private/var/mobile/Containers/Data/Application/242E9C11-6203-4EE1-8938-9EA7CB939032/tmp/RNVectorIcons__Material Design Icons_56192_22#000000@3x.png", scale: 3},
{uri: "/private/var/mobile/Containers/Data/Application/242E9C11-6203-4EE1-8938-9EA7CB939032/tmp/RNVectorIcons__Material Design Icons_56192_22#000000@3x.png", scale: 3},
{uri: "/private/var/mobile/Containers/Data/Application/242E9C11-6203-4EE1-8938-9EA7CB939032/tmp/RNVectorIcons__Material Design Icons_56192_22#000000@3x.png", scale: 3}
]

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

ericschaalcommented, Jul 23, 2020

@mrousavy Downgrading to “6.6.0” is the only solution I found so far.

0reactions

mrousavycommented, Sep 10, 2020

I’ve created a repro of this bug here: https://github.com/mrousavy/react-native-vector-icons/tree/get-source-repro Working on a fix.

Top Results From Across the Web

Setting WPF image source in code - Stack Overflow

ico file is marked as Content and is being copied to the output directory. this.Icon = new BitmapImage(new Uri("Icon.ico", UriKind.Relative));.

react-native-vector-icons - npm

Start using react-native-vector-icons in your project by running ... getImageSource, Returns a promise that resolving to the source of a ...

UserFacingIcon (NASA World Wind)

Returns the icon's background image source, if any. double, getBackgroundScale(). Indicates the relative screen size of the background image, if specified.

Image.Source Property (Windows.UI.Xaml.Controls)

The framework will wait for the image source to be returned, ... (URI); supporting partial Uniform Resource Identifier (URI) is another XAML shortcut....

Images - React Native

The image name is resolved the same way JS modules are resolved. In the example above, the bundler will look for my-icon.png in...