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    

Intro to Navigation

We've added Navigation to Draftbit!

Our navigation currently supports three types of Navigators: a Switch Navigator, a Stack Navigator, and a Tab Navigator. These navigation styles are based on, and powered by React Navigation.

Check out their individual pages for more info on their usage and configuration options.

Navigation does not work in the browser!

View your project in Expo or Web Publish to see navigation in action.

Getting Started w/ Navigation

Open the Navigation menu by clicking the Navigation button towards the top of the builder. Once the menu is open, click the Navigation icon to add a Root Navigator. Currently, a Switch Navigator is the only type of Navigator that can be a Root Navigator.

Once you've added the Root Navigator, you're able to add screens or additional navigators inside of it.

For example purposes, we'll add a Stack Navigator and inside that Stack Navigator we'll add a few basic authentication flow screens added to this project from our Template Gallery.

To make it all work, you'll have to configure Buttons or Touchables by assigning an Action (in this case, Navigate) in the Properties Panel.

Once you've selected a Button or Touchable in the Layer Tree, go to the Action tab, change the action to 'Navigate' and then choose the Screen or Navigator you'd like the Button or Touchable to navigate to.

If you switch over to Expo and press the Sign Up button, it'll navigate to the Sign Up screen. That's it! It's that easy.

Updated 2 months ago

Intro to Navigation

Suggested Edits are limited on API Reference Pages

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