Xamarin how to remove extra space at bottom on iOS

Question

Anyone know how to get rid of the bottom white space which shows up on iOS only (android is fine). Here is a basic grid which should put the red row 2 at the bottom of the page but it doesn't.

Code:

<ContentPage.Content>

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="{OnIdiom Phone='50', Tablet='90'}"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <BoxView Grid.Row="0" Color="Blue"/>
    <BoxView Grid.Row="1" Color="Green"/>
    <BoxView Grid.Row="2" Color="Red"/>

</Grid>
</ContentPage.Content>

screenshot on ios (has white space on bottom)

screenshot on android (no white space)

Other things I've tried: using an absolute layout as well as adding a stack layout to the bottom with verticaloptions=end but it resulted in the same thing--extra space on iOS yet worked on android.

Answer 1

To remove the extra white space at the bottom of screen on Xamarin iOS, you need to set ios:Page.UseSafeArea to false like below:

<ContentPage ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             Title="Home"
             ios:Page.UseSafeArea="false">
    <Grid RowSpacing="0">
        ...
    </Grid>
</ContentPage>

Output: