In this lesson, I want us to talk about how we navigate a user through our application.

Because in contrast to the web environment, where we have websites and web applications, right, in mobile we have something called views. We already learned earlier in the course that we had our home view, which we sometimes call our root view. This is where our user lands in our application, and we set up some logic that navigated the user from our home view onto another view in our app, which is a tab.

I'll give it this nice little tab bar here, and we can navigate between different tabs in our application — like between our Trips tab and our Account tab. You can think about what we're doing when we're navigating between these different tabs as just swapping out what is visible within the user's viewport, as we call it — i.e., what the user can see on their mobile screen.

So, virtually every mobile application has tabs, right? You tab between different views. And this is the app we're eventually going to be building — Wonder Log — it, of course, has tabs too. You've already seen tabs at a basic level. In most of our applications, we're going to have tabs, and you can think of them as sort of forming this base layer in our app.

But the other common way that you're going to navigate between views is to navigate to them in what we call a stack. This is a new view, and when I navigate to this view as a stack — rather than it coming in as a tab and replacing what's there before — if I navigate to it within the stack, it does what the name implies: it stacks on top of the view beneath.

What I can keep doing is I can keep stacking new views. So, if I want to navigate the user from View A to View B, View B can become the new view in the stack. View C might come on top of that, and so our views end up being stacked like a deck of cards.

The benefit of doing things like this is that the user can very easily — and using native swipe actions on mobile — navigate back through the stack. They can navigate back, which is doing the same thing as taking the top card, if you will, the top view, off of the stack to reveal the view underneath. And they can keep doing this, should they wish, all the way back through to whatever the bottom layer is — which, in a lot of cases, is going to be the tab view.

So, this is an app called Substack — you may already be familiar with this — basically social media for writers. It's got this feed of posts here, and if you click onto one of these posts, it opens in a stack. If I click on the author's profile at the top of the post, then the author's profile opens on the stack. If I click on one of the other posts that they have on their profile, that opens onto the stack.

And if I now swipe from the edge of my screen or click the little back icon in the top left corner, then all I do is remove the last view from the stack until I'm back on the first view — which, of course, is the tab.

This is what we're going to be building in Wonder as well. If I click onto a trip, that's going to add the trip details onto the stack. If I then click onto a diary entry, that's going to add the diary entry onto the stack. And I can, of course, cycle back through the stack by just taking off the most recently added view.

Now, as well as opening views in a stack, we can open views in what we call a modal. A modal is sort of the equivalent of a popup on web in that it opens above the content underneath in a way that preserves the sense that there is still a view or some content or context underneath the modal.

Modals are something that appear over the top of a view and can be swiped down off of the view. For that reason, we don't really want to be stacking them. They're designed to be used just to provide some extra information or actions that you want the user to focus on within the context of a particular view or a particular part of the application.

Here's an example again from Substack. If, on a post, I click the little commenting icon, that pulls up a full screen modal where I can write my own comment. I can drag from the top here to drag the modal back down.

So, critically, right — it's appearing in context of the content underneath. There's the suggestion, because I can see the content if I drag down, that this modal is just a temporary little view that is sitting on top of what I was just viewing.

We're going to see this as well when we're adding locations to our diary entries, because we're going to open up a full screen modal for searching for a particular location — a modal that we can, of course, remove.

And then, the last type of view that we're going to show is very similar to a modal in that it appears over the top of the content underneath — and this is a sheet. A sheet gives us a little bit more control. A modal always opens all the way to the top of the screen, whereas a sheet we can actually control how far up the view we want this sheet to reveal itself, and the user can also drag it with their finger to expose more or less of it.

So again, as an example — there's this post on Substack. If I click the three-dot icon in the top right corner, then I get this sheet popup that is appearing basically three-quarters of the way up the screen, and I can drag it down should I wish.

In Wonderlog, we're going to have something similar, where I can hit a filters icon in the top right corner of this view in order to open a sheet of filters that I can then drag out of the way.

So, that's views and navigation in a nutshell, and this is really going to set us up now for when we start — practically speaking — building out our views and our navigation system over the coming lessons.