Overview

Mobile devices expose system UI elements — the status bar at the top, the navigation bar at the bottom, device notches and home-indicator bars — that do not exist on desktop browsers. Each page in your mobile app can configure how it interacts with these elements, creating polished, native-feeling experiences that are tailored to the content on that specific page.

Mobile appearance settings are per-page overrides. They only take effect when the app is running on a mobile device (iOS or Android native container, or a mobile browser in PWA mode). On desktop browsers, these settings are ignored entirely.

Note: App Settings → Mobile → Appearance contains app-wide defaults for status bar colour and orientation. Per-page settings override these defaults for that specific page. When you navigate away from the page, the app-level defaults are restored.

Settings Location

To access mobile appearance settings for a page:

Open Page Settings: Right-click the page in the Pages panel and select Page Settings.
Navigate to Appearance: In the Page Settings panel, click the Appearance tab.
Expand Mobile Overrides: Click Mobile Overrides to expand the section. All mobile-specific appearance properties are grouped here.

Properties Reference

Property	Type	Default	Description
`statusBarColor`	`string (hex)`	App default	Background colour of the device status bar (the thin strip at the top showing time, battery, and signal). Accepts a hex colour value (e.g. `#0D2137`). On iOS, the status bar background is set by the page behind it — this property provides an explicit colour for pages that need to override the automatic inference. Has no effect on Android below API level 21.
`statusBarStyle`	`enum`	App default	Colour of the icons and text on the status bar. `light` renders white icons (use on dark backgrounds). `dark` renders dark icons (use on light backgrounds). Corresponds to iOS's `UIStatusBarStyle` and Android's `WindowInsetsController` appearance bits.
`navigationBarColor`	`string (hex)`	App default	Background colour of the Android system navigation bar at the bottom of the screen (the bar containing the Back, Home, and Recents buttons). This property is Android-only — iOS does not expose a navigation bar background colour.
`orientation`	`enum`	`auto`	Lock the device orientation for this page. `auto` follows the device's physical orientation. `portrait` forces the page to display in portrait mode regardless of device position. `landscape` forces landscape. The lock is active only while the page is open — navigating away restores the app-level orientation setting.
`safeAreaInsets`	`boolean`	`true`	Whether the page respects device safe area insets — the spaces around the notch, Dynamic Island, and home indicator bar. When `true` (default), the page content is padded to avoid these areas. When `false`, content extends into the full screen including the notch and home indicator regions. Set to `false` for full-bleed background images or videos that look best when they fill the entire screen.
`fullScreen`	`boolean`	`false`	When `true`, hides the device status bar entirely — the page occupies the full display height from top to bottom. Implies `safeAreaInsets: false`. Use for immersive experiences such as a video player, a camera view, or an on-boarding splash screen. Users can still summon the status bar on iOS with a swipe from the top.
`pullToRefresh`	`boolean`	`false`	Enables the native pull-to-refresh gesture on this page. When the user drags down from the top of the page content, a system refresh spinner appears and the page's On Pull to Refresh trigger fires. Wire this trigger to your data source re-fetch actions. Only meaningful on pages with scrollable content.

Warning: When you disable safe area insets, your content will overlap the notch and home indicator. You are responsible for adding padding to your layout components to ensure interactive elements (buttons, inputs) are not obscured. Use the CSS environment variable env(safe-area-inset-top) in custom CSS, or add a fixed-height spacer component at the top of your page layout.

Common Use Cases

Full-Screen Media Pages

A video player or image gallery that should occupy the entire screen without system UI interruption:

Set fullScreen to true to hide the status bar.
Set safeAreaInsets to false so the video frame fills edge-to-edge.
Add a translucent close/back button in the top-left using a fixed-position container, manually offset from the top by a safe area amount.
Set statusBarStyle to light so it matches when the status bar is temporarily shown.

Landscape-Locked Dashboards

A data dashboard, chart view, or table that benefits from the wider landscape layout:

Set orientation to landscape. The device rotates automatically when the user navigates to this page — they do not need to physically rotate their device.
Keep safeAreaInsets at true so the dashboard's controls are not cut off by edge notches.
Design your layout for a ~844×390 pt viewport (iPhone 14 landscape) as a baseline — the builder's responsive preview makes this straightforward.

Tip: Automatically rotating to landscape can be disorienting if unexpected. Consider showing a brief tooltip or a rotate-device indicator on the transition into the page. Many users hold their phone in portrait mode with rotation lock on — orientation locking overrides the device rotation lock but cannot override the user's explicit accessibility setting in some OS versions.

Immersive Onboarding Screens

On-boarding flows and splash screens often benefit from a truly immersive, full-bleed look:

Set fullScreen to true.
Set statusBarColor to match your on-boarding background colour — even when the status bar is temporarily visible (e.g. on interaction), it will blend with your design.
Set statusBarStyle based on your background: light for dark/vibrant backgrounds, dark for light backgrounds.
Use a Page Transition of fade into the on-boarding sequence and slide-left out to the main app — this creates a clear entrance/exit feel.

Pull-to-Refresh Lists

List and feed pages where users expect to refresh content by pulling down:

Set pullToRefresh to true.
Open Page Settings → Events → On Pull to Refresh trigger.
Add a Fetch Data Source action targeting the data source that powers the list. The refresh spinner dismisses automatically when all queued data source fetches complete.

Testing Mobile Appearance Settings

Mobile appearance settings have no visible effect in the desktop builder or in a desktop browser preview. To test them accurately:

Use the builder's mobile preview mode — toggle the viewport to "Mobile" in the builder toolbar. This shows the layout at mobile dimensions but does not simulate status bar colour or orientation locking.
Use the UnifyApps Preview app — install the UnifyApps Preview app on a physical iOS or Android device, connect it to your workspace, and open your app in preview mode. All mobile appearance settings apply fully.
Publish to a test environment — publish the app to a staging environment and open it in a mobile browser or native shell for end-to-end testing.

Mobile Page Appearance