Bottom Bar
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
You can add up to 5 tabs to the bottom bar.
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.
Assign a number from 0 to 5 to determine the tab's position in the bar. Tabs are arranged based on these numbers.
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.
Provide an SVG icon for the tab.
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.
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.
To apply the changes to your app, save the settings and rebuild your app.
