LogoLogo
  • A better way to do...stuff!
  • How we build the app
    • Overview
  • Documentation
    • Draftbit
      • Using Live Preview
      • Workspaces and Billing
      • Introduction to the Builder
      • Layout
      • Intro to Navigation
      • Fetching Data
      • Direct Integrations
      • FAQs
      • Draftbit
      • Draftbit
      • Custom Blocks
      • Borders, Background, and Elevation
      • Actions
      • Custom Screen Code
      • Exporting and Publishing Your Project
      • Sharing Your Project Online
      • Publishing Your App as a PWA
      • Stack Navigator
      • Tab Navigator
      • Draftbit
      • Draftbit
      • Basic
      • Media
      • REST Services & Endpoints
      • REST API Integrations
      • Themes & Styling
      • Submitting Data
      • Draftbit
      • Draftbit
    • Xano
      • resources-and-tips-1
        • 🎞️ Xano Video Tutorials
        • 🤝Community Corner
        • 💰Share Xano. Make money
      • FAQ
      • getting-started
        • ⚡ Jumpstart
        • 🎞️ The Xano Interface
      • instances
        • What is an Instance?
        • Early Access Instance
        • Upgrading an Instance
        • Sharing
        • Bandwidth Usage
        • API Rate Limit
      • What is a Workspace?
      • Dashboard
      • Database
      • Airtable Import
      • API
      • Library
      • Marketplace
      • Settings
      • authentication
        • Authentication
        • Sign-up & Log in
      • data-manipulation
        • The Function Stack
        • Addons (GraphQL-Like)
        • The Expression Builder
        • External Query Manipulation
        • Timestamp
        • Filters
        • Images
    • Expo
      • Creating your first build - Expo Documentation
    • Kommunicate
      • Installation
      • Installation
      • Installation
      • Installation
      • Installation
      • Flutter Installation
      • Installation
      • Zapier Integration
      • Authentication
      • CMS Installation
      • Authentication
      • Conversation
      • Conversation Assignment
      • Customization
      • Localization
      • Logout
      • Web Troubleshooting
      • Installation
      • Authentication
      • Push Notification
      • Conversation
      • Customization
      • Localization
      • Logout
      • Installation
      • Authentication
      • Push Notification
      • Conversation
      • Customization
    • Formito
      • basics
        • Getting Started
        • Variables
        • Are you GDPR ready?
        • How to prefill the values of my chatbot?
      • connect
        • How to connect Formito to Zapier?
      • convert
        • How to convert old formito chatbots to the new version?
        • How to convert Google Forms into a chatbot?
        • How to convert a Monday.com board to a chatbot?
        • How to create chatbot from QuickBase table?
      • guide
        • How to add my chatbot to WordPress?
        • How to create a chatbot for Zendesk?
      • shopify
        • How to embed my chatbot into a Shopify page?
        • How to display Formito chatbot on bottom corner of my Shopify store?
        • How to open my chatbot after clicking on links or buttons?
    • Stonly
  • Flex Stuff
    • App
    • APIs
    • Database
    • Website
    • Design
    • Style Guide
  • Content
    • Guides
    • ChatBots
    • Blogs
    • Whitepapers
  • Company
    • About us
    • Brand
    • Roadmap
    • Policies
  • Flex Together
    • Overview
    • Fair Finance
Powered by GitBook
On this page

Was this helpful?

  1. Documentation
  2. Draftbit

Tab Navigator

PreviousStack NavigatorNextDraftbit

Last updated 4 years ago

Was this helpful?

*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.

Parameter

Description

Font

Set the font, font size, and line height for the tab labels (Note: Show labels must be active in the configs tab).

In this section, you can set colors for a tab's Active state (when the screen attached to the tab is currently being viewed) and Inactive state (screens that are not being viewed).

Parameter

Description

Text

Icon

Background

Set the color of the area of the tab

Parameter

Description

Name

Set the name for the navigator to appear in the Navigation tree.

Initial Route(Make sure this is set)

Set a screen or navigator as the initial route.

Number of tabs

Set the number of tabs to appear in the navigator (max 5).

Show labels

Enable to show labels on each tab.

Show icons

Enable to show icons on each tab.

Label position

Set the position of the tab label.

Parameter

Description

Route

Assign a screen in the navigator to a tab.

Label

Set the label for the tab (If a label is not set in this section, the label name defaults to the screen name).

Icon

Set an icon for the tab.

Parameter

Description

Lazy Load

If enabled, tabs will only render in the active state.

Back Behavior

Set the back behavior for the navigator.

Allow Font Scaling

Enable so that the label font will scale to meet Text Size accessibility settings (defaults to true).

Adapt to Screen

Enable so the navigator adapts to the size of the screen.

Hide When Keyboard Shown

Enable so that the navigator is hidden when the keyboard appears on the screen.

Set the color of the tab label (Note: Show labels must be active in the tab).

Set the color of the tab icon (Note: Show icon must be active in the tab).

Updated 7 months ago

React Navigation - TabNavigator reference
React Navigation - Tab navigation
Table of Contents
Styles
Labels
Colors
Configs
Basics
Tabs
Advanced
Resources
styles
configs