Skip to content

fix(android): SetBackground colour doesn't reach the safe areas - #526

Closed
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-window-background-insets
Closed

SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/android-window-background-insets

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member

What's wrong

On Android, UI.SetBackground doesn't reach the safe areas. In landscape, the strip beside the camera cutout (and behind the navigation bar) keeps the default light background instead of the colour you set. iOS already gets this right.

Why

Android paints the window behind the app, but the screen's container (a Material Scaffold) covers it edge to edge with its own default background.

What this does

The Scaffold uses the SetBackground colour when one is set, and keeps the default otherwise. Nothing changes for apps that never call SetBackground. Android only.

How to reproduce

Open this screen on Android and rotate to landscape.

  • Before: a light strip on the cutout side and behind the navigation bar.
  • After: dark edge to edge.
// routes/mobile.php
Route::native('/repro/insets', \App\NativeComponents\InsetsBackground::class);
// app/NativeComponents/InsetsBackground.php
namespace App\NativeComponents;

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

class InsetsBackground extends NativeComponent
{
    public function mount(): void
    {
        nativephp_call('UI.SetBackground', json_encode(['color' => '#18181b']));
    }

    public function render(): View
    {
        return view('native.insets-background');
    }
}
{{-- resources/views/native/insets-background.blade.php --}}
<native:column class="w-full h-full bg-zinc-900 items-center justify-center">
    <native:top-bar title="Insets" :background-color="'#18181b'" :text-color="'#ffffff'" />
    <native:text class="text-[17] text-white">Rotate to landscape</native:text>
</native:column>

UI.SetBackground promises to control what shows behind transparent
system bars and safe-area insets, but Android only painted the
Activity decor — and the chrome renderers' Scaffold covers the decor
edge to edge with the Material default background. In landscape the
cutout-side insets showed that default instead of the override, unlike
iOS (whose stack renderer backgrounds screens with the shared
WindowBackgroundState). The override now has a Compose-observable
mirror that both Scaffolds use as containerColor, falling back to the
Material background when unset; the tabs renderer keeps its
transparent-canvas case for persistent background layers.
@SRWieZ

SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member Author

Closing in favour of #528, which fixes the same strips the standard way: through the screen's own bg-* class, without calling UI.SetBackground.

@SRWieZ SRWieZ closed this Oct 3, 2026
@SRWieZ
SRWieZ deleted the fix/android-window-background-insets branch October 3, 2026 16:27
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.

1 participant