🎨Control Style & Colors

Styles and colors in your native mobile app enhance branding, user experience, accessibility, personalization, adaptability, provide a competitive edge while offering flexibility for future updates.

πŸ§‹ Bubble.io Plugin

[Action] Natively - Background Color

Updating the App background-color

[Action] Natively - Progress Color

Updating a progress bar color

[Action] Natively - Swipe Navigation

Enable or disable Swipe Navigation

[Action] Natively - Status Bar Style

Updating the Status Bar Style

[Action] Natively - Pull to refresh

Enable or disable Pull to refresh

[Action] Natively - Orientation

Change and lock device orientation in the app

[Action] Natively - Show Progress

Hide / show progress in the app

[Action] Natively - Close App

Closes (kill) the app

[Action] Natively - Enable Wake Lock

Keeps the screen unlocked

[Action] Natively - DIsable Wake Lock

Allows screen to auto lock

πŸ›  JavaScript SDK

Updating the App background-color

const color = "#000000";
window.natively.setAppBackgroundColor(color);

Updating a progress bar color

const color = "#000000";
window.natively.setAppProgressColor(color);

Enable or disable Swipe Navigation

const toggle = true;
window.natively.setAppSwipeNavigationIOS(toggle);

Updating the Status Bar Style

const style = "NONE"; // DARK, LIGHT or NONE
window.natively.setAppStatusBarStyleIOS(toggle);

Enable or disable Pull to refresh

const toggle = true;
window.natively.setAppPullToRefresh(toggle);

Change and lock device orientation in the app

const orientation = "PORTRAIT"; // DEFAULT, PORTRAIT or LANDSCAPE
window.natively.setAppOrientation(orientation);

Show/Hide Progress in the app

const toggle = false;
window.natively.showProgress(toggle);

Close the app

window.natively.closeApp()

Wake Lock

window.natively.enableWakelock(); // Keeps the screen unlocked
and window.natively.disableWakelock(); // Allows screen to auto lock

Last updated

Was this helpful?