Natively Docs
Join our community 🔥
  • 👩‍🚀Getting Started
    • What is Natively?
    • Why Natively?
    • FAQ
    • Create Your First App
  • 🚀Natively Platform
    • 🚉Releases
    • 🖌️Appearance
      • 😼App Icon
      • 📱Loading Screen
      • 📱Error Screen
      • 🎨Style
    • 🎬Preview
    • ⭐Features
      • 🛳️Bottom Bar
      • 🚇Deeplinks
        • 🔥Firebase
        • 🔗Universal Links
        • 🌱Branch.io
      • 📍Geolocation
      • 🔔Notifications
        • 📲OneSignal Notifications
        • 🔥Firebase Notifications (Advanced)
      • 📒Contacts
      • 👩‍🎨Social Auth
        • 🍏Sign In with Apple
      • 💟HealthKit
      • 💰Purchases
      • 🤑Admob
      • 💳NFC
      • 📷Camera
      • 📂Photo Library
      • 🎤Microphone
      • 📈Analytics
        • 🕊️AppsFlyer
        • 😛Facebook
    • 🚚Publish
      • 🍏iOS App
      • 🤖Android App
    • ⚙️Settings
    • 🙈Subscription Plans
  • Guides
    • 🧋Integration (Native Features)
      • 🏅How to get started?
      • ℹ️Device
      • ℹ️Browser Info
      • 🛳️Bottom Bar
      • ✂️Clipboard
      • 🚦Push Notifications - OneSignal
      • 🚦Push Notifications - Firebase (Advanced)
      • 📍Geolocation
      • 📦App Storage
      • 🗝️Biometrics & Credentials
      • 📧Native SMS/Email
      • 📅Native Date Picker
      • 📸Native Camera
      • 🎙️Native Audio Recorder
      • 🈁Native Scanner (QR/Barcode)
      • 📔Contacts
      • 🍏Apple Sign In
      • ❤️HealthKit
      • 💸In-App Purchases
      • 🤑Admob
      • 💳NFC
      • 🥑Show Toast/Banner
      • ⏳Show/Hide Loading Screen
      • 🥑Haptic Feedback
      • 🖼️Share Media/Files
      • 📱Open an external App/URL
      • ✍️Request User's review
      • ↔️getInsets
      • 🎨Control Style & Colors
    • 🔍Troubleshooting
    • 🐈Setup RevenueCat App
    • 🚑Setup Admob App
    • 🚥Setup One Signal App
    • 🧑‍🤝‍🧑Setup website Universal Links (Deeplinks)
    • 🍕Testing & Submitting your app
    • 🔑Generate iOS Push Key (NEW)
    • 🔑Generate iOS Push Certificate (Legacy)
    • 🤝Affiliate program
    • 📕For Partners: Natively Brand Book.
Powered by GitBook
On this page
  • 🧋 Bubble.io Plugin
  • 🛠 JavaScript SDK

Was this helpful?

  1. Guides
  2. Integration (Native Features)

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.

PreviousgetInsetsNextTroubleshooting

Last updated 1 month ago

Was this helpful?

🧋 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

🧋
🎨
Bubble.io Plugin
JavaScript SDK