[Nativescript][Android] Add badge on tabview tabs



Can i add badge on tabview tabs?


Here is an example how you can use badges in iOS and Android


Thanks for solution.

is the project yours?


Yes, I wrote that sample.


very nice, thanks.

I made some changes to the code because I would like to see the badge as in the image I attached.
As you can see I eliminated the horizontal orientation and I set Y and X to place the badge.
The problem is that by adding the badge view at the bottom of the tabitem this creates space, how do you delete it?


can you help me?


I’m not sure what exactly you updated, if you share the updated Playground example I can take a look.




i tried use this library for add badge in android tabs

but look:



I don’t see the exact example in Playground as you shown me in image, but still I think setting marginTop and marginRight to -30 will give you the desired output instead of setting X and Y.


sorry i haven’t insert image for time.
Ok i solved with marginTop on the contenView.

Thanks :slight_smile:


Hi alexma01,
you can not share your tabview with me?
Estou com o mesmo problema.


Hi @andretimm.
I modified the project using the margin as I had been suggested.


Great @alexma01,

It worked perfect .
I’m starting with nativescript now. And my problem now is, add badges after running my ngOnInit, not when the tab is loaded in the onTabViewLoaded event. Do you have any idea ?
And sorry my English, I’m Brazilian haha


You can add / modify a component only when it’s created, ngOnInit doesn’t guarantee that the native components are created. May be you can try ngAfterViewInit.


I’m sorry if I replied late.
Have you solved or do you still need help?


Is this solution still working?
Couldn’t make it work


UPD: nvm, resolved…


Did you actually test it? The version I created still seems to work on my end.


I tried to run playground on my iPhone and it failed, that is why I asked you.
Didn’t check on Android yet, but hope it works.

Using your code locally - no success on iOS.
item.bageValue is undefined

working solution for me on iOS:

if (isIOS) {
let tabItem = tabView.ios.tabBar.items[i]; // i - 0-based tabIndex
Preformatted text tabItem.badgeValue = “5”;


Sorry, this thread was specific to Android, so I tested only in Android when you asked. iOS may need adjustments in 4.x, I will check and let you know.


They have just renamed the internal variable from _iosViewController to __controller.

Updated my example.