The Draftbit Developer Hub

Welcome to the Draftbit developer hub. You'll find comprehensive guides and documentation to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Tab Navigator

Tab Navigators allow you to add tabbed navigation to the bottom of your app. The bar is fixed to the bottom of the screen. Each tab is linked to a screen (or navigator) and displays an active state when selected.

Configuration

Change the type of navigator.

Tab Options

Select whether you want to show or hide tab icons and labels under the Tab Styling panel.

Tab Styling

Here, you have access to a variety of customization options for your tab navigator. You are able to change tab text, icons and routing.

Tab text style

Change the fonts on the label text of a tab. You can use your own font or one we provide. You can further customize this text by setting the Size, Spacing and Line Height (in px).

Active/Inactive text color

Set active/inactive colors for the label text on a tab. This corresponds with the state of the tab itself being active and inactive.

Active/Inactive icon color

Similar to above, you can set the color of the tab icon for when someone is viewing the Screen that corresponds to a tab (the active state) or when the Screen that corresponds to a tab is not currently being viewed (the inactive state).

Active/Inactive tab background color

Similar to above, you can set the background color of the tab for when someone is viewing the Screen that corresponds to a tab (the active state) or when the Screen that corresponds to a tab is not currently being viewed (the inactive state).

Tab ordering

This is where you set the screen that corresponds to each tab in the navigator. You can set a maximum of 5 Screens in a tab navigator. When using less than 5 tabs, the tabs will be spread out evenly across the navigator. Each tab contains these options that can be configured:

Screen or Navigator

This is where you connect any screen or navigator that's already been added to the current navigator for a specific tab.

Label

Set the label text of the tab. If you don't enter a label, it defaults to the name of the Screen that was set in the builder.

Icon

Choose the icon associated with this tab.

Resources

React Navigation - createBottomTabNavigator
React Navigation - Tab navigation

Tab Navigator


Tab Navigators allow you to add tabbed navigation to the bottom of your app. The bar is fixed to the bottom of the screen. Each tab is linked to a screen (or navigator) and displays an active state when selected.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.