[Bug] NavigationBar has a shadow since v5.0.0.2196

[NPadrutt]

Description

When I upgrade my Xamarin Forms application with shell from version 5.0.0.2125 to 5.0.0.2196 I have a border under the header of my application.

I tried the suggestions from there: https://stackoverflow.com/questions/19226965/how-to-hide-uinavigationbar-1px-bottom-line and the further links there. Specifically adding this to my iOS app:

        UINavigationBar.Appearance.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
        UINavigationBar.Appearance.ShadowImage = new UIImage();

and

        var appearance = new UINavigationBarAppearance()
        {
            BackgroundColor = UIColor.Clear, ShadowColor = null,
        };

        UINavigationBar.Appearance.StandardAppearance = appearance;
        UINavigationBar.Appearance.ScrollEdgeAppearance = appearance;
        UINavigationBar.Appearance.CompactAppearance = appearance;

Both didn't work. From what I found in a StackOverflow question it seems that his is an issue with Shell.

Expected Behavior

There is no shadow under the navigation bar

Actual Behavior

see image above

Basic Information

• Version with issue: 5.0.0.2196
• Last known good version: 5.0.0.2125
• Platform Target Frameworks:
  • iOS: 15
• iPhone 12, iPad Pro, iPhone 15 Simualtor (probably all other devices with iOS and iPad OS too)

[jfversluis]

In iOS 15 there have been changes to the Navigation Bar and Tab Bar unfortunately. Would you be able to add a reproduction sample which shows how you have you code setup in your project? Thanks

[NPadrutt]

Sure, I'll attach a sample in a bit. But just to say, it does work as expected with version 5.0.0.2125 of Xamarin Forms on iOS 15. I don't know if that was more of a side effect of something else that was fixed in subsequent versions though. But I thought I saw that there was something fixed around the navigation header.

[NPadrutt]

Here the sample.
With the latest version:

with version: 5.0.0.2125

Funny enough, when you don't pick white as the color it seems the two version do display it a bit different, which would speak for my theory that there was a fix / change in between here.

App1.zip

[jfversluis]

But just to say, it does work as expected with version 5.0.0.2125 of Xamarin Forms on iOS 15.

I highly doubt this because that version doesn't have the fixes to show the navigation bar the right way for iOS 15. So what you are probably seeing is things being broken 😅 have you tried setting a different background color to the navigation bar with version 2125? That probably doesn't work :)

But anyway, that doesn't really matter that much. It's probably because of this, this is how we fix the iOS 15 issues: https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.iOS/Renderers/ShellNavBarAppearanceTracker.cs#L71

But we grab some default look for the navigation bar and with that probably override the Appearance API values.

What is also very weird is that it seems to work in other scenarios. Our application that we use for testing this code seems to work fine

UINavigationBar.Appearance.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
UINavigationBar.Appearance.ShadowImage = new UIImage();

However in a File > New Xamarin.Forms app it doesn't work...

[bcaceiro]

Is this issue closed? Because I'm getting this problem in v5.0.0.2291

[jfversluis]

This is not closed, still looking into it, any help is appreciated

[jfversluis]

Thanks everyone for your patience! Like I already said; this has to do with Apple changing up some iOS APIs here. I've been playing with this and while there is multiple ways to fix this, they're all not great. "Not great" meaning in this case that you will need to change code in your app for every scenario that I can come up with and for some of the scenarios that I came across we need to change code.

Preferably I would like to change as less as possible on our side. And since you need to change something anyway, my proposal is the following.

1. Get rid of the code that has been removing the line so far
2. Replace that with a custom renderer that you can find below

using System.ComponentModel;
using App1;
using App1.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell), typeof(ShellNavbarRenderer))]

namespace App1.iOS
{
    public class ShellNavbarRenderer : ShellRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
        }

        protected override IShellNavBarAppearanceTracker CreateNavBarAppearanceTracker()
        {
            return new NoLineAppearanceTracker();
        }
    }

    public class NoLineAppearanceTracker : IShellNavBarAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(UINavigationController controller)
        {
        }

        public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
        {
            var navBar = controller.NavigationBar;
            var navigationBarAppearance = new UINavigationBarAppearance();
            navigationBarAppearance.ConfigureWithOpaqueBackground();

            navigationBarAppearance.ShadowColor = UIColor.Clear;
            navBar.ScrollEdgeAppearance = navBar.StandardAppearance = navigationBarAppearance;
        }

        public void SetHasShadow(UINavigationController controller, bool hasShadow)
        {
        }

        public void UpdateLayout(UINavigationController controller)
        {
        }
    }
}

This will override the behavior or our default ShellNavBarAppearanceTracker with something that removes the line. The alternative would be that you change the code in your AppDelegate to something similar like the code in SetAppearance, and then in our code we need to check if you have set a value from the AppDelegate and we don't override that. To me this feels a bit nicer, but I'm interested to hear your thoughts and if this also works in your scenarios.

Thanks!

[NPadrutt]

@jfversluis thanks for your investigation and the workaround. So far it does work as expected. A bit unfortunate is that it also override all styles. So it seems that those have to be set in the custom renderer manually again I presume?

[jfversluis]

Yeah I would be recommended to then add all the styling that you had before also in there now. Unless you were using styles in Xamarin.Forms, that should still work?

[jfversluis]

I have merged #15330 that might be fixing this one as well. Make sure to try out Service Release 11 when it comes out. If that still doesn't fix it let me know. Thanks!

[NPadrutt]

@jfversluis I only just removed my custom renderer from the work around since I migrated to .net maui, but I think this still doesn't work as expected on maui. But the workaround does still work when you register the custom renderer as handler.
Just as an FYI

[FM1973]

@NPadrutt Can you let us know how you solved this in MAUI, pleas?

[NPadrutt]

@FM1973 as mentioned in my last comment, I just took the custom renderer of @jfversluis and registered it as a custom handler:

builder.ConfigureMauiHandlers(handlers => { handlers.AddHandler(viewType: typeof(Shell), handlerType: typeof(Platforms.iOS.Renderer.CustomShellRenderer)); });

[FM1973]

@NPadrutt Thanks a lot!