Search code examples
iosmauiios18

White pill button iOS 18

I’ve been working on an app using MAUI and am doing testing on various platforms. I’ve noticed a strange white pill button has decided to appear below the multitasking dots in my TitleBar of the app. Relatively new to developing for iOS and wondered if anyone could shed light on what is causing this?

Not sure if it’s some accessibility feature or something with iOS 18 but the button doesn’t seem to do anything, nor does it show in earlier versions of iOS or on any android devices.

Any advice would be much appreciated!

Example

Tried testing on multiple iOS and android devices/simulators. Only able to replicate on iOS 18.

I created a blank .NET MAUI app on .NET 8.0 and ran on iOS 18 simulator - here is my code from AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
   x:Class="TestingApp.AppShell"
   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:TestingApp"
   Shell.FlyoutBehavior="Disabled"
   Title=""
   Shell.NavBarIsVisible="false"
   Shell.TabBarIsVisible="false">

   <ShellContent
       Title="How to remove this"
       Shell.TabBarIsVisible="false"
       Shell.FlyoutBehavior="Disabled"
       Shell.NavBarIsVisible="false"
       ContentTemplate="{DataTemplate local:MainPage}"
       Route="MainPage" />

</Shell>

Here is another screenshot from test app - Seems to be something to do with the Title in ShellContent??

Test App Screenshot

Solution

  • Managed to figure this out.

    It seems to be that the area in question is actually a "Tab" - eventhough I tried to disable these. It appears Apple changed the way tabs work in iOS 18 and as such I had to use a custom renderer for the AppShell.

    Found solution here: Maui: floating tabbar on iPads in iOS 18