dotnet / dotnet/maui

[iOS] Shell TabBar overlaps ContentPage when calling Shell.SetTabBarIsVisible(this, true)

Open
#10,591 4 comments 1 reaction 0 assignees View on GitHub
area-controls-shell platform/ios s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

### Description

On iOS the Shell TabBar cuts off the bottom of a ContentPage when manually setting `Shell.SetTabBarIsVisible(BindableObject obj, bool visible)` or when binding `Shell.TabBarIsVisible` to a property.

It seems like there is a layout update missing when calling `Shell.SetTabBarIsVisible(this, true);`, because bottom items disappear behind the TabBar and centered elements appear lower afterwards. This indicates that the ContentPage extends behind the TabBar instead of being correctly recalculated.

### Steps to Reproduce

1. Create a new MAUI app
2. Add a TabBar in the Shell with two Tabs incl. ShellContent
3. Add a Grid to the MainPage with a Label centered vertically and a Button (or any other View element) at the bottom (or fairly close to the bottom)
4. Override `OnSizeAllocated(double width, double height)` of *MainPage* and call `Shell.SetTabBarIsVisible(this, height > width);`
5. Run on a real iOS device
6. Rotate from Portrait into Landscape
7. Rotate from Landscape back into Portrait

Expected result: The TabBar is correctly shown and hidden and the ContentPage is always rendered correctly
Actual result: The TabBar hides the bottom of the ContentPage after calling `Shell.SetTabBarIsVisible(this, height > width);`

### Link to public reproduction project repository

https://github.com/ewerspej/dotnet-maui-bug-tabbar-ios-cutoff/

### Version with bug

7.0.0-rc.1.22426.10

### Last version that worked well

Unknown/Other

### Affected platforms

iOS

### Affected platform versions

iOS 15.5

### Did you find any workaround?

No

### Relevant log output

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked public reproduction project and the MainPage.OnSizeAllocated call that invokes Shell.SetTabBarIsVisible(this, height > width). Run it on a real iOS device and reproduce the portrait-to-landscape-to-portrait rotation. Done means the TabBar still toggles while the ContentPage is fully laid out, with bottom and centered elements rendered correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, ios
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.