Item's bubble quality isn't good ! (pixel pixel)

[farzanm14]

I have custom the tab bar with my own icons and titles but same as picture the bubble isn't clear ; pixels of blue circle are obvious 🙄🤔 what should I do make them like library's preview ?

I have use png icons and here is my code :
`
<TabBar
onPress={tabIndex => {
this.setState({
currentPage: tabIndex
})
}}
values={[
{ title: "منو", icon: require("../../assets/png/menu_stork.png") },
{ title: "گروه ها", icon: require("../../assets/png/group_stork.png") },
{ title: "پیام ها", icon: require("../../assets/png/message_stork.png") },
{ title: "درایو", icon: require("../../assets/png/drive_stork.png") },
{ title: "خانه", icon: require("../../assets/png/home_stork.png") }
]}
/>

`

[zaguiini]

.png files are not scalable, that's why you are seeing it blurred. You could use something like .svg files to achieve that.

[farzanm14]

.png files are not scalable, that's why you are seeing it blurred. You could use something like .svg files to achieve that.

Thank you :) but I think the library use png as default also I don't have this problem in IOS

[diegoHdzZ]

Do you know the needed width and height for the icons?

[diegoHdzZ]

Hey! I just modified the library so it can work with vector-icons! U should check it out! https://github.com/diego3799/CustomBottomTabNavigator

[darmonlyone]

just use png with 3 sizes like him ex:mask.png, mask@2x.png, mask@3x.png. Its work fine for me