Intro to Navigation

Navigation is how you let users move between different Screens in your app. You can manage your app's navigation in the Navigate mode.

How it works

The way you set up the navigation structure in your app is completely up to you. You can arrange and nest different Screens and Navigators to create hierarchies as simple or complex as your app requires.

As your user navigates through Screen in your app, they create a navigation history (unless you reset it) that is used to navigate back either when the user swipes/presses back or when you use a Navigate Action.

By default apps have a Root Navigator (which is a just a Stack Navigator) and this is where all your Screens are added by default. You can add Stack and Tab Navigators inside the Root Navigator to further structure your navigation.

Screens and Navigators have their own independent Style, Config, and Interaction tabs when in Navigate mode.

Types of Navigators

Root Navigator

Every app has a Root Navigator that can't be removed and all Screens are added to this navigator by default.

The Root Navigator is a type of Stack Navigator. You can nest Screens as well as other Stack and Tab Navigators inside your app's Root Navigator.

Setting the Initial Route for the Root Navigator will determine the initial Screen that loads when your app is launched.

Stack Navigator

Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack. By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, use OS default animation on Android.

Stack Navigators include a navigation Header at the top of the Screen by default. This is where the Screen name and back button typically appear in apps. You can customize the navigation Header for Screens and Navigators, including changing the background and text colors or even disable it completely.

As you user navigates through Screens in a Stack Navigator, each Screen is added to the stack. Navigating back removes Screens from the stack.

Read more about Stack Navigators.

Tab Navigator

Tab Navigator is a simple tab bar on the bottom of the screen that lets you switch between different Screens and doesn't include its own top navigation Header. You can nest Stack Navigators inside Tab Navigators to organize Screens and add a navigation Header.

You're able to customize the label and icon for the tabs displayed in the bottom tabs and even create a completely custom bottom tab bar using Blocks.

Read more about Tab Navigators.

⚠️

Draftbit currently does not support Drawer Navigator. However, it is on our roadmap. You can upvote the feature request here.

Configure an Initial Route

You should configure the Initial Route property for all Navigators to specify which Screen to display initially. The Initial Route set for the Root Navigator will be the first Screen users see when opening your app.

1. Go to Navigate settings.
2. Select the Navigator (for example, the Root Navigator is selected in the image below).
3. Go to Properties Panel > Config tab.
4. Under Basics > General, select the value of Initial Route either a nested navigator (nested under Root Navigator in the image below) or a screen name.

Navigating between Screens

Using the Navigate Action, you can navigate to a Screen or Navigator.

To implement this navigation behavior:

• Select a Trigger, such as On Press for a Button component
• Add a Navigate Action to the Action Editor
• In the right panel, select the Destination Navigator or Screen.

📘

Passing data when navigating

You can pass data to a Screen when navigating using the Navigate Action. See the docs on Passing Data.

Hiding the default Header for Root Navigator

To hide the default Header of the Root Navigator:

• Go to Navigate tab from the top menu bar.
• Select the Root Navigator and in the Properties panel, select the Configs tab (second tab).
• Set the value of Header Mode to None.

Similarly, you can hide the Header for all the screens inside a custom Stack Navigator that you add:

Hiding the default Header of an individual screen

To hide the default Header of the an individual screen:

• Go to Navigate tab from the top menu bar.
• Select the screen name in the left panel and in the Properties panel, select the Configs tab (second tab).
• Set the value of Header Mode to Hide.

Prevent Going Back

You can reset the navigator preventing the user from navigating back to previous Screens by selecting the reset option for the Behavior prop in a Navigate Action. This will remove all navigation history and make the Screen you're navigating to the initial Screen in the navigation history preventing any back behavior.

This is especially useful when navigating to a home Screen from a login or registration Screen, for example.

Additional Info

Draftbit apps use React Navigation under the hood.