SVG icons in tabBar navigation without any magic?

[eliaskotov]

Hi,

We want to use custom SVG icons and it seems that we cannot do that. 1.5 years ago Pgcluan suggested that we do some conversions, but we are not sure if they work and want a working solution.

React Navigation allows that. How can we do the same with RNN?

Thank you!

---

Environment

• React Native Navigation version: V2
• React Native version: 0.59
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): All

[ghost]

I'm trying to figure out how to do this but there is no documentation about, any solution until now?

[ghost]

@eliaskotov Actually there is a workaround for this issue, I figured it out reading this issue.

So, first of all you need to install react-native-vector-icons. Now you are able to import the icons from it, and do this workaround:

import Icon from 'react-native-vector-icons/MaterialIcons';

...

Icon.getImageSource('menu', 20, '#ffffff')

getImageSource returns you the png version of the icon that you have and this one you can put in the icon variable.

But to use your own svgs you need to use icomoon that allows you to create an icon like the icons that you import from react-native-vector-icons.

import { createIconSetFromIcoMoon } from 'react-native-vector-icons'

const Icon = createIconSetFromIcoMoon(icoMoonConfig)

Icon.getImageSource('menu', 20, '#ffffff')

Using the createIconSetFromIcoMoon with your icomoon config json inside you have your own Icon component, then you can call the same function getImageSource() whit the icon name, size and color to get the png version of it and put it into your tabBar config.

I don't think it is possible to use a pure svg image in the tabBar config.

I hope it will help you.

EDIT:

I've found a documentation about it: https://wix.github.io/react-native-navigation/#/docs/third-party?id=react-native-vector-icons

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[AlphaJuliettOmega]

@emilioheinz

EDIT:

I've found a documentation about it: https://wix.github.io/react-native-navigation/#/docs/third-party?id=react-native-vector-icons

Hmm, that link is unfortunately now stale.

[AlphaJuliettOmega]

The iconmoon route is pain. I wish this library supported using any one of the available React Native vector icon library's without having to resort to using a third party site.

[ahtokca]

I wish it is supported too. iOS and Android support SVG natively quite a while