Skip to content

fix(android): a screen's bg-* doesn't reach the edges in landscape - #528

Open
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-screen-bg-fills-safe-areas
Open

SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-screen-bg-fills-safe-areas

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member

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
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).

In landscape the root renderers inset each screen by the Scaffold
padding, so the strips beside the camera cutout and behind the
navigation bar showed the Scaffold's default colour instead of the
screen's own background. A shared screenBackground() modifier now paints
the screen's flat background (bg-*, or its dark variant) behind that
padding, in both the stack and the tabs renderer — iOS fills the safe
areas with the screen background since NativePHP#477.
@simonhamp

Copy link
Copy Markdown
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants