Create Interactions with Navigation

Getting Started with Navigation

Let's create some interactions between screens in your app, and then test those interactions live on your mobile device.

This Lesson has some prerequisites. 🚧

If you've already completed Lesson 1 (Build a Welcome Screen) and Lesson 2 (Add & Theme an Example Screen), then you're ready to go!

If not, you will need:

  1. At least 2 screens in your app.
  2. Both screens must contain at least 1 Button or Touchable component.

Tip: Just add 2 Example Screens to your app and you're ready to go!

image

First up, let's take a look to see what the Navigation Builder looks like. To do this:

Click the ⑃ Navigation button in the left-hand column and you should see a Root Navigator has been created for you with all of your screens inside.

In the Root Navigator, you're able to add additional Navigators and Screens, but for now, we'll leave it as is.

Dismiss the Navigation Builder by clicking the Layout button.

image

Next, select any Button or Touchable on your screen.

Add a Navigate Action to that component:

  1. Open the Actions tab of the Properties Panel
  2. Click the Action dropdown and select 'Navigate'
  3. Click the Destination dropdown and select the name of the other screen in the Stack navigator.
image

Time to preview your work!

Navigation routes are disabled in the browser. To preview the navigate Actions you built, you must use Live Preview on your mobile device.

Click the ▶ button to launch Live Preview now.

You've successfully added Navigation to your app!

image

Need additional help with building navigators and connecting your screens? Connect with us in the Draftbit Community↗️

In the next Tour, we'll show you how to populate your app with live data from an external data source.