π¨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?