In this post I'm going to show you how to use our latest exciting feature: Draftbit Navigation. Draftbit Navigation allows you to add navigation to your app's buttons (and other touchables) with just a few clicks.
For this tutorial, we're going to use Rentbit as the playground. Rentbit is our example property listings app that comes pre-loaded with every Draftbit account. You can get your Draftbit account by signing up here.
My goal is for you to be comfortable with Draftbit Navigation after this walkthrough, but if you want to build on your knowledge or just need a refresher on React Navigation, head on over to the Docs site to read more.
Step 1: Decide how to group screens into navigators
Most of the time, even "simple" apps will have multiple flows that a user can go through. If your app has multiple flows, it's best to visualize these flows as groups ahead of time.
In this example, the Rentbit screens can be organized into 2 groups, Authentication (screens for logged-out users) and Main (screens for logged-in users).
Step 2: Create your Draftbit Navigators
Now that you have your screens grouped, open up the Draftbit's Navigation menu and add a Root Navigator. The Root Navigator will serve as the main navigator that all of our navigation will be nested inside.
In this case, the Root Navigator's type is a Switch. A Switch Navigator allows you to move forward, but not backward, through screens which is perfect for moving users through an authentication flow. For more info on Switch Navigators, check out this guide.
Inside the Root Navigator, add two more Navigators — a Stack Navigator for the Authentication Screens and a Tab Navigator for the Main Screens.
Stack Navigators are great for linear flows, such as authentication and onboarding. Users can go through these processes step-by-step, much like navigating through a stack of playing cards.
Tab Navigators work best for the Main Screens. In this part of the app, we want the user to freely navigate between screens. They shouldn't be constrained to a linear flow. Tab Navigators also have the advantage of a "nav bar" at the bottom of the app screen. Tabs in this bar can display an Active state when selected.
You should have added three Navigators to the Rentbit app. To stay organized, let's rename our Navigators to something that's easy to remember. To rename a Navigator, select the Navigator's name in the config panel and type a new name. Press Enter to save the new name.
I named the Stack Navigator "Authentication" and named the Tab Navigator "Main."
Before we start adding screens to our navigators, we need to make sure the user goes through the Authentication navigator before the Main navigator. Re-select the Root Navigator in the menu and then select the Authentication navigator in the Initial route dropdown in the Configuration panel.
Step 3: Add Screens to your Navigators
Next, add your screens to the Navigators you just created. The Draftbit Navigation interface makes this easy. To add Screens to a Navigator:
- Select the Navigator you want to add Screens to
- Click the 📱icon
- Select the Screen you wish to add to the Navigator
You can also click & drag to reorder Screens inside the Navigator.
After adding all of the necessary screens, I selected the Welcome Screen in the Initial route dropdown in the Configuration panel since it's the first Screen the user will see.
If you have Live Preview open you may have noticed each Screen in the Stack Navigator has a header with a "Back" button and the Screen's title in the center. In React Navigation, this header is displayed by default. Rentbit already has Icon Buttons that represent "Back" buttons so there's no need to include the default header as well. We can remove this header by changing the Header mode to "None" in the Header Options panel.
Step 4: Add Navigate Actions to your Draftbit Screens
Before we start configuring Navigate Actions to our buttons, let's take a moment to go over how we're going to navigate through the Authentication flow in Rentbit.
Let's walk through adding a Navigate Action to a button in the Assembler. Once you complete these steps, your Rentbit user will be able to tap "Sign Up" from the Welcome Screen to navigate to the Signup Screen.
- Open the Welcome Screen in the Assembler.
- Select "Button Solid" in the Layer Tree (note: there are two buttons on the Welcome Screen. Button Solid is the one labeled "Create an Account" in the Config Panel).
- Expand the accordion menu that says "Action".
- From the "Select an action..." dropdown, select "Navigate".
- From the "Selection a destination..." dropdown, select "Signup Screen".
Repeat these steps above to add Draftbit Navigation to every screen in the Stack Navigator ("Authentication") in Rentbit. Use the diagram above as a guide!
(Heads up: All "touchables" in Draftbit can be configured with Navigate Actions. Don't forget to configure non-Button touchables, such as "back arrows" in the headers of certain screens!)
Configuring the Tab Navigator is different from the Stack Navigator. Instead of using buttons on each screen to navigate forward and back, the Tab Navigator uses the bottom Tab bar. This is configured on the Tab Navigator itself.
Let's walk through the steps to add routes for three tabs (Explore, Trips, and Settings) on the Tab Navigator:
- Select the Tab Navigator ("Main") in the Navigation menu.
- Open the Tab Styling panel and expand the "Tab ordering" section.
- Select the first Tab 1️⃣ and assign the "Explore Map" screen to it.
- Repeat for the other two tabs, according to this screen capture:
Once you've configured the Tab routes, you can go back and add styling to each tab.
Icons and Labels are a great way to add visual punch to your Tabs. On the first Tab, change the Label to "Explore" and add a Map 🗺 icon from the icon picker. On the second Tab, change the Label to "Trips" and add a Plane ✈️ icon. On the third Tab, change the Label to "Settings" and add a Gear ⚙️ icon.
Step 5: Preview your Handywork!
Once styling is finished, open up Rentbit in Live Preview to see what you've put together. When you click on the buttons and tabs, you will be able to navigate through the app as seen below.
After completing this tutorial, we've learned about:
- Different types of navigators
- When to use each type of navigator
- Adding screens to navigators
- Configuring and styling navigators
Even though we've covered a lot, there's still much more you can do in Draftbit Navigation. Now, it's time for you to see what you can accomplish with your own app idea! If you have questions or get stuck along the way, our team is always here to help you out.