TabBarItem SVG support

[mHvNG]

I've been trying out this library for the last hour, however I'm really missing a feature. I want to use a SVG file as the image/icon for the tabbar items, but I haven't figured it out if it's possible.

I can't find anything reading the documentation, so I thought I would ask you as I really like the library during the time I've used it.

[grahammendick]

Hey there! The image prop on the TabBarItem works the same as the source prop on the React Native Image component. So you can use svg's if they're bundled with the native app.

[mHvNG]

Thanks for the very quick response. I've never used this solution before, because I've ran into some issues in the past with SVG files that aren't supported in the drawables folder. I've been an user of react-native-svg for everything related to SVG's.

Nonetheless I got it working, thanks!

[grahammendick]

No problem, I'm always happy to help

[RichardLindhout]

Ah this is cool! I think if currentColor is used in the svg the tintColor would also work!

[mHvNG]

@RichardLindhout I just checked and it 100% works. Thanks for the tip as I haven't thought it before!

[mHvNG]

@grahammendick Hi, I have just one question left about SVG support. I have a SVG that's 512x512 downloaded from Ionicons. I can't seem to size the SVG down. I tried the following:

title="Home"
image={{
  uri: 'home',
  width: 32,
  height: 32,
}}

Do I need to change the size of the SVG within the SVG file or am I doing something wrong? I've added the SVG just to be sure.

[grahammendick]

Yea, I think you have to change the size of the svg. The Navigation router is 100% native - so it's using the native UITabBarController on iOS and BottomNavigationView on Android. I'm wondering what would happen if you were building a native app without react native and you used that large svg? Wouldn't it show large there too?

[grahammendick]

But I can see what you mean about the width and height properties of the image prop. I'll reopen this and see if I can use them

[mHvNG]

Yea, I think you have to change the size of the svg. The Navigation router is 100% native - so it's using the native UITabBarController on iOS and BottomNavigationView on Android. I'm wondering what would happen if you were building a native app without react native and you used that large svg? Wouldn't it show large there too?

The native UITabBarController requires an UIImage. I would imagine you'll create an UIImage instance with scale as an argument. You could than pass this image into the UITabBarItem.

Apple docs about UIImage: https://developer.apple.com/documentation/uikit/uiimage

[grahammendick]

@mHvNG so you would have to manually size it, iOS wouldn't automatically size it because it's in the tab bar?

[mHvNG]

@grahammendick Nope, unfortunately iOS doesn't automatically size the image/asset. As far as I can read it's been an issue since the beginning.

There are people who use Preview on Mac to adjust the size of their images. However as Apple doesn't support SVG's in Preview that doesn't work either.

So for now I'll find a simple way to downsize SVG's. I'll leave it up to you if this issue is important enough to solve. It works perfectly on Android btw as everything scales automatically there.

[grahammendick]

@mHvNG Thanks for the great info

[mHvNG]

Here's the easy fix for the people who are interested:

1. Open the SVG file in Visual Studio Code or your own text-editor of choice;
2. Add the following height="25" width="25";
3. Leave the viewport as it doesn't matter. Xcode reads the width and height;
4. Add it to the Images.xcassets folder;
5. Type the filename without the extension for the image property of a TabBarItem;
6. Violà

Read Apple's Human Interface Guidelines for icon sizes: https://developer.apple.com/design/human-interface-guidelines/tab-bars#Target-dimensions

Screenshot of guidelines:

[grahammendick]

@mHvNG 🙏 The Navigation router is lucky to have you

[grahammendick]

@mHvNG Closing this down because you're unavailable. Can always reopen when you're free