Auto hiding Tab Bar on navigation

Posted on Posted in Xamarin.Forms, Xamarin.iOS


In Xamarin.Forms on iOS it’s not as easy as it should be to hide TabBar on navigation. In native programming there is a property HidesBottomBarWhenPushed, unfortunately it doesn’t work with Xamarin.Forms.

The main idea to solve this issue is to set TabBar’s height to zero and hide it, but the problem is that frame modification causes a blank space in place of TabBar. You can see it below:

Blank space
Blank space


1. Custom TabbedPage implementation

To fix the solution above we need to layout all ChildViewControllers, so let’s start with implementing our HideableTabbedPage with IsHidden property and its Renderer:


2. Auto hiding implementation

Now to automatically hide TabBar we will use a custom Page implementation. To make it simple I assumed that Application.Current.MainPage is HideableTabbedPage. If you want to improve this solution, you can hide TabBar using for example MessagingCenter.


3. Sample usage


4. Final result

Full source code

Auto Hiding TabBar
Auto Hiding TabBar