Xamarin iOS: how to dim status bar if there is Pop-up - xamarin

Question

I'm work on changing iOS status bar color and it's text color. The result appeared good except when a pop-up shown on screen. As shown as the image below, the status bar does not dimmed when a pop-up displayed on screen, it seems to stand out on the screen.
As I really not familiar with iPhone, does it usually work this way? Or is there any workaround to dim status bar if pop-up appeared?
Note: I am using iPhone X with iOS 12.1
Pop-up Code:
<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WhiteLabel.Mobile.App.Pages.Popup.TransferPopUp"
xmlns:pages="clr-namespace:WhiteLabel.Mobile.App.Pages.Popup"
xmlns:popups="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:Resources="clr-namespace:WhiteLabel.Mobile.App.Resources">
<!--Animations use example-->
<popups:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</popups:PopupPage.Animation>
<!-- Content -->
<StackLayout
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Padding="20, 20, 20, 20">
<StackLayout BackgroundColor="White">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
</Grid>
<StackLayout >
<Label
Text="DELETE_POPUP_INFO"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
<Grid BackgroundColor="White" Padding="20, 20, 20, 20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!-- Cancel button-->
<Button x:Name="CancelButton"
Command="{Binding TappedCloseCommand}"
Grid.Row="0"
Grid.Column="0"
Text="CANCEL"
BorderWidth="1"
BorderRadius="0">
<Button.BorderRadius>
<!-- fixes a bug on android where border doesn't work without a radius. -->
<OnPlatform x:TypeArguments="x:Int32">
<OnPlatform.Android>1</OnPlatform.Android>
</OnPlatform>
</Button.BorderRadius>
</Button>
<!-- Delete button-->
<Button x:Name="DeleteButton"
Command="{Binding TappedDeleteCommand}"
Grid.Row="0"
Grid.Column="1"
Text="DELETE"
WidthRequest="500"
BorderRadius="0">
</Button>
</Grid>
</StackLayout>
</StackLayout>
</StackLayout>
</pages:BasePopupPage>

Answer 1

I use your code and create a pop up page. It works as expected. I will show you the code I use and you can have a look at it.
Here is button event I use to show the pop-up:
private void Button_Clicked(object sender, EventArgs e)
{
PopupNavigation.Instance.PushAsync(new Page1());
}
And I did not add additional code in the pop up page:
public partial class Page1 : PopupPage
{
public Page1()
{
InitializeComponent();
}
}
The code in Xaml is the same as you and I use Rg.Plugins.Popup with version 1.1.5.188.
I can share you the sample if you want.
Here is the screenshot: