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    

Stack Navigator

Stack Navigators are the most common form of navigator. They allow you to move between screens in your app like you navigate through a stack of cards in a deck. When you navigate to a screen, it puts that screen on top of the deck, preserving the history so you can always go backwards.

The changes made in the Stack Navigator's config panel will apply to all screens within the navigator

If you need to change the configuration of individual screens, check out the Screen Override section toward the bottom of the page.

Configuration

Change the type of navigator and select a screen for the initial route.

Header Options

Header Mode

Mode
Description

Float

A header will be fixed to the top of the phone screen while navigating through each Screen in the stack. The title will change fade in while navigating (Commonly used in iOS).

Screen

Each Screen in the stack has its own header attached to it and the entire header will move as you navigate (Commonly used in Android).

None

No header will appear. (Selecting this option will hide the Header Styling panel in the Config Panel)

Float Mode

Float Mode

Screen Mode

Screen Mode

You can also hide the header on individual screens instead of hiding the header in the entire stack navigator

In the Navigation menu, click on an individual Screen and a 'Hide header bar' checkbox will appear on the right hand side.

Header Layout

Layout
Description

Center

The Screen title will be positioned in the middle of the header (iOS default).

Left

The Screen title will be positioned towards the left, close to the back button (Android default). On iOS, the title of the Back button is hidden.

Center Layout

Center Layout

Left Layout

Left Layout

Header Styling

Header text color

Set the color of the Header title.

Header text style

Set the style of the Header title. 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).

Header background color

Set the color of the Header bar

Left/Right header icon

Choose the icon(s) to be displayed on the left/right of the header.

If you set a Left header icon, it will be an icon button replacing the default "Back" button

Other Options

Mode

Setting the Mode determines Header transition animations.

Mode
Description

Card

Uses the native screen transition animations

Modal

iOS only. When selected, screens will slide in from the bottom on transition.

Card Mode

Card Mode

Modal Mode

Modal Mode

Stack Navigator


Stack Navigators are the most common form of navigator. They allow you to move between screens in your app like you navigate through a stack of cards in a deck. When you navigate to a screen, it puts that screen on top of the deck, preserving the history so you can always go backwards.

Suggested Edits are limited on API Reference Pages

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