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

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.

Parameter

Description

Use App Theme

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.

Parameter

Description

Color

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.

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

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

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.

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.

PreviousPublishing Your App as a PWANextTab Navigator

Last updated 4 years ago

Was this helpful?

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

Updated 7 months ago

React Navigation - createStackNavigator
StackNavigator reference
Table of Contents
Styles
Theme
Header
Content
Configs
Basics
Header
Content
Gestures & Animation
Advanced
Resources
Basic Settings