AppShell tabbar color changes on iOS when there is content behind it - ios

Question

I have the exact same issue as asked in this question. The tabbar changes color when there is content behind it. However, as stated in this question, if they remove the renderer then their problem stops. I currently do not have a renderer at all and still have this problem. The only part of my code that doesn't have this problem are pages that are not in the shell hierarchy and that are navigated to using the following line of code:
var search = new SearchList();
Navigation.PushAsync(search);
The pages that are navigated to using the style of the following lines of code have the tabbar issue:
await Shell.Current.GoToAsync($"//{nameof(MemberList)}");
The xaml and code behind for the different pages are the exact same. The only difference is one is defined in the appshell hierarchy(MemberList) and the other is not(SearchList) as seen below:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SampleYE.Views"
Title="SampleYE"
x:Class="SampleYE.AppShell"
>
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.DisabledColor" Value="#AD94BB" />
<Setter Property="Shell.UnselectedColor" Value="{StaticResource Tertiary}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{StaticResource Secondary}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{StaticResource Tertiary}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{StaticResource Secondary}"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<ShellContent Route="StartupPage" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:StartupPage}" />
</TabBar>
<TabBar>
<Tab Title="Directory" Icon="icon_feed.png">
<ShellContent Route="MemberList" ContentTemplate="{DataTemplate local:MemberList}"/>
</Tab>
<Tab Title="Profile" Icon="icon_about.png">
<ShellContent Route="ProfilePage1" ContentTemplate="{DataTemplate local:ProfilePage1}" />
</Tab>
</TabBar>
<!--
If you would like to navigate to this content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<TabBar>
<ShellContent Route="LoginPage1" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:LoginPage1}" />
</TabBar>
</Shell>
The definition of the pages with the issue are as follows:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleYE.Views.MemberList">
<ContentPage.Content>
<ListView x:Name="listView" ItemSelected="OnItemSelected" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
<Label Text="{Binding Title}" VerticalTextAlignment="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
<Image WidthRequest="44" HeightRequest="44" Source="{Binding Photo}" />
<StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
<Label Text="{Binding Name}" VerticalTextAlignment="Center" Font="Medium" />
<Label Text="{Binding Title}" VerticalTextAlignment="Center" Font="Micro" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
<ContentPage.Content>
<Grid RowDefinitions="Auto">
<ScrollView Grid.Row="0" >
<Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="*,*" VerticalOptions="CenterAndExpand"
RowSpacing="25">
<Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderColor="{StaticResource Secondary}"
VerticalOptions="Start" HorizontalOptions="Center" WidthRequest="150" HeightRequest="150"
CornerRadius="75" HasShadow="False" Padding="0" IsClippedToBounds="True">
<Image Source="Profile" Aspect="AspectFill"/>
</Frame>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="{StaticResource Primary}" BackgroundColor="{StaticResource Secondary}"
HeightRequest="54" WidthRequest="54" CornerRadius="27" TranslationX="65"
ImageSource="Camera" HorizontalOptions="Center" VerticalOptions="End"/>
<Frame Grid.Row="2" Grid.ColumnSpan="2" IsClippedToBounds="True"
Margin="20,20,20,0" CornerRadius="15" Padding="0,20,0,20" >
<Grid RowDefinitions="*,*,*" ColumnDefinitions="*,*,*,*" RowSpacing="12" ColumnSpacing="5">
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Calvin"/>
<Label Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Carter"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Ace"/>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Wrecking Ball"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Spring"/>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="2014"/>
</Grid>
</Frame>
<Frame Grid.Row="3" Grid.ColumnSpan="2" IsClippedToBounds="False"
Margin="20,20,20,0" CornerRadius="15" Padding="0,20,0,45" >
<Grid RowDefinitions="*,Auto,Auto,*" ColumnDefinitions="*,*,*,*" RowSpacing="20" ColumnSpacing="5" >
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalTextAlignment="Center"
Text="02/01/1994"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" HorizontalTextAlignment="Center"
Text="Wreckingball14"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="CCC#blackhousedevelopers.com"/>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Wrecking Ball"/>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Spring"/>
<Label Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="2014"/>
</Grid>
</Frame>
<Grid
Grid.Row="4" Grid.ColumnSpan="2" IsClippedToBounds="False"
Margin="20,0,20,0" Padding="0,20,0,20"
RowDefinitions="Auto,Auto" ColumnDefinitions="*,*" RowSpacing="20" >
<Frame IsClippedToBounds="true" Grid.Row="0" Grid.ColumnSpan="2"
Padding="0"
CornerRadius="15">
<Editor HeightRequest="70" x:Name="interestEntry"
BackgroundColor="{StaticResource Primary}" TextColor="{StaticResource Secondary}"
Placeholder="Interests (i.e. UFC, Fishing, Investing etc;)"
PlaceholderColor="{StaticResource Secondary}"/>
</Frame >
<Frame IsClippedToBounds="true" Grid.Row="1" Grid.ColumnSpan="2"
Padding="0"
CornerRadius="15">
<Editor HeightRequest="140" x:Name="bioEntry"
BackgroundColor="{StaticResource Primary}" TextColor="{StaticResource Secondary}"
Placeholder="Biography (A little information about yourself)"
PlaceholderColor="{StaticResource Secondary}"/>
</Frame>
</Grid>
</Grid>
</ScrollView>
</Grid>
</ContentPage.Content>

Answer 1

The fix to this was updating my ios project to a newer version. they fixed it in the update.