[SRWieZ]

What's wrong

On Android in landscape, a screen's background colour (bg-*) doesn't reach the edges. The strip beside the camera and the strip behind the navigation buttons keep the app theme's colour instead. iOS already fills them with the screen's colour (#477).

Before	After

Why

Android shrinks the screen by those strips, and the space left behind shows the container's default colour.

What this does

The screen's background (bg-*, or its dark-mode variant) is also painted behind those strips. Screens without a background don't change. It covers both layouts (normal and tabs) through one small helper. Android only.

How to reproduce

Open this screen on Android and rotate to landscape.

// routes/mobile.php
Route::native('/repro/screen-background', \App\NativeComponents\ScreenBackground::class);

// app/NativeComponents/ScreenBackground.php
namespace App\NativeComponents;

use Illuminate\View\View;
use Native\Mobile\Edge\NativeComponent;

class ScreenBackground extends NativeComponent
{
    public function render(): View
    {
        return view('native.screen-background');
    }
}

{{-- resources/views/native/screen-background.blade.php --}}
<native:column class="w-full h-full bg-zinc-900 items-center justify-center">
    <native:top-bar title="Background" />
    <native:text class="text-[17] text-white">Rotate to landscape</native:text>
</native:column>

Tested on an Android 16 emulator (stack layout).

[simonhamp]

How does it behave with backgrounds that have transparency e.g. bg-red-500/50?

[simonhamp]

And can you fix the conflicts?

[SRWieZ]

done!

[simonhamp]

Sorry @SRWieZ, there's more 😬

[SRWieZ]

done!