Tabbed page's tab icon show incompletely

Question

The App uses Tabbed page to show 4 pages.

The tab icon shows normally like Picture-A with iPhone12 Pro/iOS16.6.1.

The tab icon shows incompletely like Picture-B with iPhone14 Pro/iOS17.1.2 and iPhone15 Pro Max/iOS17.1.2.

Picture-B seems like the height of tab column is not as high as Picture-A.

It looks like the entire tab column has been moved down a bit, so there is no way to display the second line of text in the tab button.

Because iPhone12 Pro and iPhone14 Pro are the same as the size(6.1 inch). I guess this issue may only appear on iOS17.

Does anyone face the issue? How to fix it?

Xamarin.Forms package version is V5.0.0.2612.

Picture A

Picture B

---MyPage.xaml---

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:me="clr-namespace:MyProject;assembly=MyProject"    
             x:Class="MyProject.MyPage">
</TabbedPage>

---MyPage.xaml.cs---

#define iOS
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
using Xamarin.Forms.Xaml;

namespace MyProject
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MyPage : Xamarin.Forms.TabbedPage
    {
        public MyPage()
        {
            InitializeComponent();
#if iOS
#else
            this.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);
#endif
            this.Children.Add(new TestAPage());
            this.Children.Add(new TestBPage());
            this.Children.Add(new TestCPage());
            this.Children.Add(new TestDPage());
        }
    }
}

Answer 1

If you want to customize the tabbar height, one way is to use Custom Renderer.

[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))]
namespace TabbedPageWithNavigationPage.iOS
{
    public class TabbedPageRenderer : TabbedRenderer
    {
        public TabbedPageRenderer()
        {
        }

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();
            TabBar.Frame = new CGRect(TabBar.Frame.X, TabBar.Frame.Y - 30f, TabBar.Frame.Width, TabBar.Frame.Height + 30f);
        }

    }

}

This will add 30 pixel to the tabbar height.