Request: Expose getImageSource()

[andrioid]

Is it possible to expose getImageSource on the icon-set components?

I've tried adding it myself, but no luck yet.
Seems like the NativeIconAPI is not available, so I can't just add the method.

I would really appreciate a clarification and hopefully a fix.

I'll leave the doc link in the rnvi readme.
https://github.com/oblador/react-native-vector-icons#usage-as-png-imagesource-object

[brentvatne]

I can be convinced for why this is needed, but the only reason I can see is to use it with ToolBarAndroid or TabBarIOS, and I don't recommend using either of those, so we'll need more than that. Tagged as wontfix until then!

[andrioid]

Just for arguments sake, I'd like to hear why you wouldn't recommend using standard components from the react-native project. Some of us try to strive for that "native look" and that's just easier with actual native components..

My use-case is, as you mentioned TabBarIOS and ToolBarAndroid.

As for the 'wontfix' tag - that's fair. I imagine that the more native stuff you guys support, the more native code there is to maintain and most stuff can be done in JS anyway.

Can I suggest a little foot-note to the icon-documentation mentioning that getImageSource is not supported and that you recommend against using TabBarIOS and ToolbarAndroid?

[brentvatne]

@andrioid - sure. I don't recommend using them because they are not cross-platform and can be easily re-created using react-native components, and they are less flexible even on the platform they do work on than just using a rebuilt one with react-native components. Is there some particular behavior you see in TabBarIOS and ToolBarAndroid that you don't get with just using the react-navigation tab bar and navigation bar? If so, we should improve react-navigation accordingly

[brentvatne]

Oops, forgot to mention the footnote -- yeah we should do this. I have had an open issue here for a while to warn or throw an error with TabBarIOS and vector-icons, if you could add a note to README and/or add some warning/error at runtime and send a PR this would be very helpful!

[dannin]

How do we use the icons in a MapView without getImageSource @brentvatne?

[brentvatne]

@dannin - use images i suppose

[oxyii]

+1, I need getImageSource

[klase]

Why is this tagged wontfix? How else would you use the icons on a map view?

[brentvatne]

use a static image @klase, i don't see why this needs to be done at runtime

[klase]

@brentvatne In our case we load the markers from a json file and since only local image resources are allowed to be used in react-native-maps, it seems odd to include assets twice when we already reference the icon set elsewhere (for tab navigation for example).

[brentvatne]

@klase - you can make it a remote image local by downloading it with FileSystem.downloadAsync :) so there is a workaround for now.

i definitely empathize with what you're saying from an ergonomics point of view though - it seems easier to just get the image source from the font at runtime. i'd be open to a proposal for a more generic module in expo to do this, but i don't think we should add it to the vector-icons lib and make it inherently coupled to icons.

[oxyii]

Looks like @expo/vector-icons does not include react-native-vector-icons NATIVE modules, so @expo/vector-icons cannot expose RNVI native methods... But babel-preset-expo trying to tell us that this is a complete analogue. Unfortunately, it is not. And I don't think that we will be able to convince expo members of the opposite

[brentvatne]

i think the best approach is to extract those native methods from react-native-vector-icons into another library that is specific to the functionality that they provide.

we don't like to include native modules when the api is designed as a grab bag of assorted functionality - we prefer if they are broken down into general purpose primitives. if we don't do this then the api surface area becomes a mess of slightly overlapping functionality in different libraries with a burden of maintaining ad-hoc implementations of the same thing in different places resting on us.

@oxyii - as for why we map react-native-vector-icons directly to @expo/vector-icons, this is very important for compatibility with the ecosystem of libraries such as react-native-paper and react-native-elements that depend on react-native-vector-icons. they do not use the getImageSource native method

[brentvatne]

perhaps a good place to include this method could be on expo-font - named something like extractGlyph - then we could expose getImageSource but have it depend on that implementation instead, and people can use the more generic Font.extractGlyph elsewhere too

[klase]

@brentvatne FileSystem.downloadAsync is not really a practical solution for us as it would require a network connection initially, but I do see your point about the api surface. +1 for adding it to expo-font.

[oxyii]

I still think it should be here. react-native-vector-icons have a documented behavior, @expo/vector-icons forced (via babel) react-native-vector-icons requests to @expo/vector-icons... According to my logic, native methods should be implemented here

[brentvatne]

@klase - if the image is already bundled in your app (via assetBundlePatterns) then you can use it just fine w/o FileSystem.downloadAsync, so that could be an option for you for now.

@oxyii - i updated the readme for you so that the documented behavior in @expo/vector-icons is clear 233adbb

[oxyii]

@brentvatne ha-ha, thank you. But this is just escape from the problem. babel-preset-expo is still forced RNVI requests to @expo/vector-icons and @expo/vector-icons still does not contain RNVI documented functionality.

Look, I don’t really care anymore. Expo - is a BEST, really best way to learn react-native. And I am really very grateful to expo... Also I noticed that expo is moving towards modularity and it's great! But compatibility with native modules ceased to be enough for me... So I went to pure react-native.

But it seems that this question will still rise before you. Good luck to all!

[oxyii]

@iddan can you join this discussion? I think your react-native-canvas lib with merged react-native-canvas#109 can help workaround this... especially since WebView is already included in expo

[iddan]

I'm sorry @oxyii but I'm not sure how can I help here. Would you mind giving me some context?

[oxyii]

@iddan @expo/vector-icons cannot provide RNVI method getImageSource because this method is native. But this method just create 2d context, print one symbol (with specific font) into it and then get base64 string with png MIME...
We need to this method because native components (such a maps of bottom tabbar) cannot use vector

This is android implementation for example https://github.com/oblador/react-native-vector-icons/blob/master/android/src/main/java/com/oblador/vectoricons/VectorIconsModule.java#L43

[iddan]

I'm not sure creating a canvas for this would be the right approach. But I was intending to use Skia's Canvas Kit in React Native Canvas instead of a WebView. Maybe it can help you achieve what you want: https://skia.org/user/modules/canvaskit

[oxyii]

@iddan Very interesting... but looks like WebAssembly is not yet supported on RN... at least not on all platforms and simulators react-native-community/jsc-android-buildscripts#113

Seems that this issue can not be resolved without a WebView. Sorry guys.

react-native-canvas lib with merged react-native-canvas#109 can help workaround this...

Looks like this is the only solution for now

[oxyii]

Despite the fact that this functionality is not relevant for me, I could not help but think about it.
@andrioid @klase @dannin @robksawyer @foreleven the only thing I could do for you was server-side conversion https://github.com/oxyii/getimagesource

if the expo does not plan to include RNVI native module then I think this issue can be closed

[iddan]

@oxyii you can compile WASM to asm.js to support JSC

[oxyii]

@iddan I'm not an expert on emsdk compilation tuning... Pre-built wasm have a size about 7Mb. My asm version - more that 13Mb... too expensive for this issue in both cases.. even if it will work )))
Plus asm status "very experimental" (I know that it's another module), plus asm.js performance issues...

[nandorojo]

I want the image source so that I can render it in a native iOS menu component. There's no way to render JSX inside of this component. Is the solution to just copy the image file into my assets?

[oxyii]

@nandorojo a lot of time has passed since then. I'm sure you can use pre-caching. But I do not recommend using my deployments of getImageSource repo. I do not guarantee that the resources will work. Feel free to clone repo and create your own deployment. But it's easier to copy the image files into assets

[brentvatne]

using eas build you can use the getImageSource function from react-native-vector-icons

[mpinkard]

using eas build you can use the getImageSource function from react-native-vector-icons

@brentvatne Would you mind elaborating on your comment?

[brentvatne]

you can learn more about eas build vs expo build in these blog posts:

https://blog.expo.dev/expo-managed-workflow-in-2021-5b887bbf7dbb
https://blog.expo.dev/expo-managed-workflow-in-2021-d1c9b68aa10

tl;dr expo build doesn't let you include custom native code, eas build does. you can also get a similar experience to expo go by using expo-dev-client

[artsnr1]

I need getImageSource to use as a thumb image in slider

[nandorojo]

probably best to just download and import the image of the icon itself

[artsnr1]

How to do that? except using Filesystem.download...? Like if I want to keep it in my assets folder

[nandorojo]

just download the icon from figma or your icon maker’s website

[kevindetry]

Looks like react-native-bottom-tabs needs this: https://okwasniewski.github.io/react-native-bottom-tabs/docs/guides/usage-with-vector-icons.html