The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information 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, you can select a while the navigation menu is open to configure overrides.

Styles

Theme

Parameter

Description

Use App Theme

Enable to apply the default theme styling to navigation (set under Basic Settings.

Header

Description

Parameter

Font

Set the font of the text in the header.

Text Color

Set the color of the text in the header.

Background Color

Set the background color of the header.

Color

Set the color of the content on the left and right-hand sides of the header.

Content

Parameter

Description

Color

Configs

Basics

Parameter

Description

Name

Set the name of the navigator.

Initial route
(Make sure this is set, especially on the Root Navigator)

Set a screen or navigator as the initial route.

Transition mode

Set the transition mode of the header.

Header mode

Set the mode of the header.

Header

Parameter

Description

Transparent

Enable so that the header appears transparent.

Title

Set the title of the header.

Alignment

Set the alignment of the header.

Allow Font Scaling

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

Left Area Icon

Set the icon for the left-hand side of the header

Left Area Label

Set a label for the left-hand side of the header

Right Area Icon

Set the icon for the right-hand side of the header

Right Area Label

Set a label for the right-hand side of the header

Content

Parameter

Description

Card Shadows

Enable so that the shadow of the card appears during transitions (defaults to true).

Card Overlay

Enable so that a semi-transparent overlay appears under the card during transitions (defaults to true on Android and false on iOS).

Gestures & Animation

Description

Parameter

Gestures

Enable so that gestures can be used to dismiss the screen.

Horizontal Response Distance

Set the horizontal distance of touch start from the edge of the screen to recognize gestures (defaults to 50).

Vertical Response Distance

Set the vertical distance of touch start from the edge of the screen to recognize gestures (defaults to 135).

Velocity Impact

Set the number that determines the relevance of velocity for the gesture.

Direction

Set the direction of the gestures.

Animation

Set to enable transition animations.

Advanced

Parameter

Description

Keyboard Handling

Enable so keyboard automatically dismisses when navigating to a new screen.

Status Bar Height

Set the amount of padding to be added to the top of the header to account for a translucent status bar.

Resources

React Navigation - createStackNavigator
StackNavigator reference

Updated 3 months ago


Stack Navigator


Suggested Edits are limited on API Reference Pages

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