XAMARIN FORMS TIPS: iOS 15 Transparent TabBar and Safe Area

 

iOS 15, transparent TabBar

Since the release of iOS 15, some people had regression with their app, particularly because of the TabBar component.

In iOS 15, by default (while using Xamarin Forms), the TabBar comes with a Transparent background and the page's content can scroll behind this TabBar. So it's not user friendly  and I presume for all existing apps, it's not beautiful. See the next picture:

iOS 15, transparent TabBar

You can solve this problem by many ways, but the fastest solution / workaround that I found is the following:

=> manage iOS SafeArea directly into your XAML to constrain page's content to fit the free space of the page. 

You can do that in XAML in 2 lines of code:

<?xml version="1.0" encoding="UTF-8" ?>

<ContentPage
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="True"
...

iOS 15 using Page.UseSafeArea = true

As TabBar is transparent, you will see the color of the page behind it. So if you use theming, the color will be updated automatically.