Navigation in a mobile app is about getting users where they want to go within the app, with the least amount of friction possible. You can implement complex navigation implement available from your designs to the mobile app using one of the navigators available.

Types of Navigation

The navigation currently supports:

These navigation styles are based on and powered by React Navigation.

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

Root Navigator

A new Draftbit app creates a Root navigator by default when you instantiate it inside your Draftbit workspace. Any screen that exists inside your app will be a part of the Root Navigator.

To view it, go to the Navigate tab from the top bar.

A Root Navigator is of the type Stack Navigator. It comes with some default Styles and Configs properties. You can modify any property that is available under these tabs, in the Properties panel on the right side.

Styles tab contains properties such as changing the font size, font color, applying a background color, or use an app-wide theme, etc.
Configs tab contains all other configuration properties. For example, changing the name of a navigator, whether to display header or not, etc.

📘
Do note that all properties listed in these two tabs may differ based on the navigation pattern you are implementing. For example, a property under Configs called Number of tabs may exist for a Tab Navigator but is not available for a Stack Navigator.

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

Configure an Initial Route: App Level

You can configure the Initial Route property for a Root Navigator to show when first the app loads.

Go to Navigate settings.
Select the Navigator (for example, the Root Navigator is selected in the image below).
Go to Properties Panel > Config tab.
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.

👍
The property Initial Route is available to all Stack Navigators. Also, a Root Navigator is also a Stack Navigator. Thus, you can also set the individual initial route for a nested Stack Navigator.

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.