BadgeTextColor always showing white on iOS

[ramonB1996]

First of all; Thank you for this Plugin!

I am now trying to create a notification-dot (on a tab of a tabbedpage) which is shown after fetching some data. The dot should not have any text in it, but should display with the specified BadgeColor. I tried this in 2 ways:

1. Using a random string as the BadgeText and setting the BadgeTextColor to Transparent.
2. Using a random string as BadgeText and setting the BadgeTextColor the same as the BadgeColor.

Both work perfectly on Android and both fail on iOS for me.

Settings:

• IPhone XR with iOS 14.0 installed
• Newest version of this plugin (2.3.1)

I am also using MVVMCross, not entirely sure if that changes anything.

The weird part is, that this will suddenly work after reloading the View by using XAML Hot Reload.

Do you have any ideas what could cause this issue? If you need any extra info, feel free to ask.

Thanks in advance,

Ramon

EDIT: I initiate the badge in my XAML and not via code-behind. I am using DynamicResources for the colors of the BadgetTextColor and BadgeColor.

EDIT 2: I found that the following works: <mvx:MvxTabbedPage.Children> <mvx:MvxContentPage Title="Tab1" tabbadge:TabBadge.BadgeColor="Red" tabbadge:TabBadge.BadgeTextColor="Red" tabbadge:TabBadge.BadgeText="!" /> </mvx:MvxTabbedPage.Children>

However, I would like to navigate to the views and have this code in the child-view itself, so I can use the associated ViewModel

[ramonB1996]

I resolved this by using a 'space character' as BadgeText. So " " will work to display an empty notification dot.

However, I still think the other ways should work aswell, so leaving this open for now.

[StephanRaab]

I resolved this by using a 'space character' as BadgeText. So " " will work to display an empty notification dot.

However, I still think the other ways should work aswell, so leaving this open for now.

I can get the badgetextcolor always white to go away with your hack using the empty space " ". But this ends up making the badge look oblong on Android in my experience.

[ramonB1996]

Hi @StephanRaab,

Sorry for the late reply, but you are right regarding this problem. What I do is use a IValueConverter in my page to make the BadgeText different on each platform:

public class NotificationStateToBadgeTextConverter : IValueConverter
{
	private const string DefaultAndroidNotificationBadgeText = "o";
	private const string DefaultIOSNotificationBadgeText = " ";

	public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
	{
		if (!(value is bool))
		{
			throw new InvalidOperationException($"{nameof(value)} must be a boolean.");
		}

		if (targetType != typeof(string))
		{
			throw new InvalidOperationException("The target must be a string.");
		}

		if ((bool)value)
		{
			if (Device.RuntimePlatform == Device.Android)
			{
				return DefaultAndroidNotificationBadgeText;
			}

			if (Device.RuntimePlatform == Device.iOS)
			{
				return DefaultIOSNotificationBadgeText;
			}
		}

		return string.Empty;
	}

	public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
	{
		throw new NotImplementedException();
	}
}

Then I use it in my page like so:

tabbadge:TabBadge.BadgeText="{Binding ShowNotification, Converter={StaticResource NotificationStateToBadgeTextConverter}}"

Maybe you can get it working that way, I think it looks less bad on Android for me this way. Maybe try different 'letters' as the BadgeText on Android, have not tried them all myself.