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
  • How the Bottom Bar feature works
  • Setting up the Bottom Bar
  • Configuring tabs
  • Edit tabs
  • Apply chages to the app
  • How to use the Bottom Bar?

Was this helpful?

  1. Natively Platform
  2. Features

Bottom Bar

PreviousFeaturesNextDeeplinks

Last updated 2 months ago

Was this helpful?

How the Bottom Bar feature works

The Bottom Bar automatically appears in your app upon launch when enabled. If you link tabs to pages requiring login, logged-out users will encounter a standard workflow (e.g., redirection to a login page within the tab) instead of seeing the page content.

Tabs function like browser tabs, remembering their navigation state. If a user navigates from a tab's linked page to another page within the app, the tab will display the last visited page, not the original linked page. This behavior persists even when switching between tabs.

Setting up the Bottom Bar

Turn on the Bottom Bar feature and set colors:

  • Bottom Bar Background Color - sets the background color of the bar.

  • Icon / Label Default Color - sets the color of inactive tab icons and labels.

  • Icon / Label Active Color - sets the color of the active tab icon and label.

  • Icon / Label Active Background Color - sets the background color of the active tab.

Configure options:

  • Haptic Feedback - enables haptic feedback when tapping tabs.

  • Show Icons - show or hide tab icons.

  • Show Labels - show or hide tab labels.

Configuring tabs

You can add up to 5 tabs to the bottom bar.

  1. Enter a label in the input field and click 'Add'. This creates a new tab with customizable settings. The label will be enclosed in quotation marks automatically, but these won't be visible in your app.

  2. Assign a number from 0 to 5 to determine the tab's position in the bar. Tabs are arranged based on these numbers.

  3. Enter the URL the tab should link to. This URL will also be enclosed in quotation marks automatically, but they won't be visible in your app.

  4. Provide an SVG icon for the tab.

  5. Click 'Save Tab' to apply your changes.

All fields (Label, Order, URL, and Icon) are required. If any field is missing or invalid, the tab will not appear in the Bottom Bar.

Edit tabs

You can change the Label, Order, URL, and Icon of each tab. Remember to save any changes by clicking the 'Save Tab' button.

To change the icon, first delete the existing one by clicking the 'Trash' icon. This will reveal the 'Upload icon' button.

To delete a tab entirely, click the 'Delete Tab' button. You can then add a new tab if needed.

Apply chages to the app

To apply the changes to your app, save the settings and rebuild your app.

How to use the Bottom Bar?

🚀
⭐
🛳️
🛳️Bottom Bar