.NET MAUI Shell TabBar does not behave as expected - ios

Question

In our .Net MAUI iOS app, we use Shell TabBar:
<TabBar>
<Tab Title="Home" Icon="{StaticResource IconHome}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
<Tab Title="Coverage
Calculator" Icon="{StaticResource IconCalculator}" >
<ShellContent ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />
</Tab>
<Tab Title="Distributor
Locator" Icon="{StaticResource IconLocator}">
<ShellContent ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />
</Tab>
<Tab Title="Scan
QR Code" Icon="{StaticResource IconQrScanner}">
<ShellContent ContentTemplate="{DataTemplate qrScanner:QrScannerPage}" />
</Tab>
<Tab Title="More" Icon="{StaticResource IconMore}">
<ShellContent ContentTemplate="{DataTemplate more:MoreFeaturesPage}" />
</Tab>
</TabBar>
As you can see, some tab titles have two lines. To show both lines, and to center the titles' texts, I use custom renderer:
internal class MyShellRenderer : ShellRenderer
{
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
{
return new MyCreateTabBarAppearanceTracker();
}
public class MyCreateTabBarAppearanceTracker : ShellTabBarAppearanceTracker, IShellTabBarAppearanceTracker
{
void IShellTabBarAppearanceTracker.SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
base.SetAppearance(controller, appearance);
var items = controller.TabBar.Items;
if (items == null)
{
return;
}
for (int i = 0; i < items.Length; i++)
{
if (items[i] == null) continue;
else
{
UITabBarItem item_temp = items[i];
UIView view = item_temp.ValueForKey(new Foundation.NSString("view")) as UIView;
UILabel label = view.Subviews[1] as UILabel;
label.Lines = 2;
label.LineBreakMode = UILineBreakMode.WordWrap;
label.TextAlignment = UITextAlignment.Center;
}
}
}
}
}
With this custom renderer, the goal is achieved only partially. Here is how the TabBar looks at the beginning:
The titles are centered, but only the first line shows up.
If the app is placed in the background, when it re-appears, all tabs have now two lines, but the text is not centered:
If I touch a tab, the texts get centered:
But the text of the second tab is truncated.
And the 2nd line of the fourth tab that has two words, loses the second word (wrapped to the 3rd line).
And when the phone is turned to landscape view, the labels are distorted even more:
Only one line shows up, but wrapped to occupy both lines.
How can this behavior be fixed? I.e. 1) how to make the text to show both centered lines initially, and 2) how to increase the tabs' width to avoid truncating, and 3) how to fix the landscape view?