[Bug] Shell TabBar background color animation is running on app start

[maxkoshevoi]

Description

When my app loads one of the things it does is theme set up (so all the colors, fonts, etc), and when user sees the app all colors are already set and displayed.

All except tabbar's background color. When user first see the app tabbar's background color finishes it's animation from white (equivalent of undefined color I think) to theme's color (back in example bellow).

Steps to Reproduce

1. Create Shell app
2. Add TabBar to it
3. Set TabBarBackgroundColor to some dynamic color that is not defined <Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource PrimaryColor}" />
4. When app loads add this color to app's resources. For example like this: Application.Current.Resources.MergedDictionaries.Add(myTheme)
5. TabBar will animate change of background color from white to your theme's color

Expected Behavior

No animation is occurring

Actual Behavior

There is animation

Basic Information

• Version with issue: 4.8
• Last known good version: -
• IDE: VS2019 16.8.1
• Platform Target Frameworks:
  • iOS:
  • Android: 11
  • UWP:
• Android Support Library Version:
• Nuget Packages:
• Affected Devices: Google Pixel 4 XL

Screenshots

(you can see a third of the TabBar is white when app fist appears)

Reproduction Link

Link to repository: https://github.com/maxkoshevoi/NureTimetable

Workaround

Set default background color that matches the theme. But my app has two themes and I don't know which one is set up on user's device.

[rachelkang]

Hi, @maxkoshevoi - thanks for submitting this issue.

confirming that I notice similar behavior in your app, where the tab bar flashes in white before loading:

ccing @PureWeen to help explore this further

[maxkoshevoi]

Is there a way to disable TabBar background color animation?

[radekraichl]

I used a custom renderer to fix it

[assembly: ExportRenderer(typeof(Shell), typeof(AppTabXF.Droid.ShellCustomRenderer))]
namespace AppTabXF.Droid
{
    public class ShellCustomRenderer : ShellRenderer
    {
        public ShellCustomRenderer(Context context) : base(context) { }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new TabBarCustomAppearance(this, shellItem);
    }

    public class TabBarCustomAppearance : ShellBottomNavViewAppearanceTracker
        {
            public TabBarCustomAppearance(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem) { }

        protected override void SetBackgroundColor(BottomNavigationView bottomView, Color color)
        {
                bottomView.SetBackgroundColor(color.ToAndroid());
        }
        }
    }
}

[simonemarra]

I used a custom renderer to fix it

[assembly: ExportRenderer(typeof(Shell), typeof(AppTabXF.Droid.ShellCustomRenderer))]
namespace AppTabXF.Droid
{
    public class ShellCustomRenderer : ShellRenderer
    {
        public ShellCustomRenderer(Context context) : base(context) { }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
  {
      return new TabBarCustomAppearance(this, shellItem);
  }

  public class TabBarCustomAppearance : ShellBottomNavViewAppearanceTracker
        {
            public TabBarCustomAppearance(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem) { }

      protected override void SetBackgroundColor(BottomNavigationView bottomView, Color color)
      {
                bottomView.SetBackgroundColor(color.ToAndroid());
      }
        }
    }
}

It seems to work as expected! Thank you for sharing! 👍