Expo Router

[00:00:00]
>> Kadi Kraman: Next up, let's talk about navigation. So navigation on mobile looks quite a bit different than navigation for web. So if you think about mobile apps that you used, so we have bottom tabs, we have modals, we have a stack navigator. So these are concepts that don't exist on the web.

[00:00:19]
And as mentioned earlier, React Native doesn't come with a navigation library built in, so we need to install one. And in this course, we're going to be using Expo Router. So Expo Router is a file system-based navigation for React Native. And it's built on top of React Navigation, which isn't a file system-based routing.

[00:00:40]
But the reason I mentioned that it's built on top of React Navigation is that all the properties for screens and screen options that are used in React Navigation, you can use in Expo Router. So a lot of the time, I find it handy to look at React Navigation docs for these details if they don't exist in the Expo Router docs.

[00:00:58]
So if you used web frameworks like Next.js, you're probably already familiar with file system-based routing. But in case you aren't, the idea is that the file names and folder names in your file system dictate what the screen is called or the URLs for the pages. So, for example, we start with an app folder, so the root of your app is an app folder.

[00:01:23]
So the index.tsx, this is your index root. Then if you have a screen called home, this will be your /home root. If you have a folder and then an index, then the index doesn't count. So you will just have the folder name, in this case, /products. And this is an example of a dynamic route, where you can pass in anything here and it will be retrieved by the screen as a screen option.

[00:01:53]
So you can, for example, have a products/123 with the product ID. So the filename-to-URL mapping is a little bit more obvious if you're doing web development. And making it work for mobile is a little bit more tricky because we have additional kinds of navigation. So we have stacks, modals, and tabs.

[00:02:14]
And the key to making this work is a layout file. So anything inside your app folder is a screen or a layout file. A layout file is underscore layout, it's called underscore layout, and you can have exactly one per folder. And the layout file tells you how the screens in that folder should be laid out.

[00:02:35]
So as a stack, tab, modal, whether you need to add additional headers, etc.
>> Kadi Kraman: So we'll be following instructions from this Expo Router get started docs, but I've copied this into the course site as well. So let's start by installing a bunch of libraries. So we have expo-router react-native-safe-area-context.

[00:02:59]
So this is basically a library for, if you're on an iOS device or actually some Android devices as well now, you have this header which overlays your content. And the safe-area-context basically tells you what area of your screen is safe to use. So Expo Router uses that under the hood.

[00:03:20]
So when you do screens in Expo Router, they are already by default wrapped in a safe area. Then you have expo-linking because Expo Router comes with deep linking built in, expo-status-bar, which is, there we go, whether this top stuff is light content or dark content or whatever, etc.

[00:03:45]
All right, next up, so this is the case for every JavaScript project where you have a package.json. So in your package.json, you have a main field, and then this main field tells you what the main entry point of your app is. So in our case, it is expo/AppEntry.js.

[00:04:07]
And actually, if you're curious, if I now open in my node modules, we go to expo > AppEntry, there you go. So all this does is it imports registerRootComponent, which is basically how you tell what the root of your app is to React Native. And it's importing this app file from our folder, so from our own project.

[00:04:33]
So it's importing this file here, the App.tsx. And actually, in some cases, this might be handy if you need to use some native libraries that require you to do things before the registerRootComponent. What you can actually do is you can copy this code into your own, like index.js.

[00:04:55]
And then point your package.json domain file into index.js, and then do additional things before you register a root component. And this is just an FYI because it does come up, but the AppEntry is basically a convenience function. All right, so in our case, we are now changing this to be the expo-router/entry.

[00:05:20]
And this changes the entry point to be this app folder, which is the root of our file system-based routing. Next up, we want to create a new folder called app, and move our App.tsx into the app folder. And hopefully, you have VS Code that automatically updates the inputs.

[00:05:45]
If not, make sure that you've updated this. Now let's rename this to index. This is also important. So with Expo Router, you need to have one index file, at least one. So if you don't like using index as your file names, you can get away with using them for most screens, but the main entry point has to be called index.tsx.

[00:06:14]
>> Kadi Kraman: So now I am getting an error, and it's because I need to restart the bundler. I think I used it in the terminal.
>> Kadi Kraman: How do I even open this? There we go. You can see I don't use the VS Code terminal very often. All right, so if I now do yarn start.

[00:06:36]
If that doesn't work, you can do yarn start-- reset cache as well, but I think it should work. So now if I reload, there we go. Thankfully, I've gotten a warning here cuz I missed a part of my instructions. So I got really excited about moving everything to the app folder, which was this, adding a scheme to your app.json.

[00:07:03]
Let's copy this and open our app.json and add the scheme. So, the reason this is required is that Expo Router comes with deep linking built in. So deep linking is basically like creating a URL that opens your app to a specific screen. And the way deep linking works on mobile is that your mobile app registers to listen to a specific scheme.

[00:07:28]
So there will be an intent fired into your phone that goes, hey everyone, there's an intent going into a scheme called Taskly. And then all the apps on your phone will basically say, no, not for me. Or some of them might say, I'm registered to that, give me the URL.

[00:07:47]
That's basically how it works and that's why it's required.
>> Kadi Kraman: All right, so now you see that it looks exactly the same. So what's now missing is we need a layout file. And actually, the reason that I did this without adding in a layout file is that to draw attention to the fact that all the screens that you create in your app folder get created as a screen in your app even if they don't have a layout file.

[00:08:16]
So by default, they will be in a stack navigator. Well, let's add a layout file, so this will be _layout.tsx. So with Expo Router, all the screens and layouts have a default export. So usually with components, we do named exports. But in this case, we do export default, and function comes, whatever, function and Layout.

[00:08:48]
So you can name this whatever because it's a default export. And let's return. So we want to render this as a stack, so we'll import stack from Expo Router, and I render this as a stack. And here, you can choose to define each of the screens you could pass in additional options.

[00:09:18]
>> Kadi Kraman: So here, let's do a Stack.Screen. And the screen name will be like the file name here, so it'll be index. And we can pass in options to the screen. So actually, so if I save this now, I go, I get this header, and the header says index.

[00:09:41]
But we don't want our screen to be called index, cuz that's a bit silly, cuz that's just the file name, we can pass in a custom title. So we'll use the options prop here and do title, let's call this our shopping list.
>> Kadi Kraman: That's it, there we go.

[00:10:06]
>> Speaker 2: Does schema mean that you'll be using taskly://URIs, or is the syntax platform-independent, so that you can deep link from a web app?
>> Kadi Kraman: You do scheme code on //, yes. There is also universal linking, it's a bit more involved. So we're going to go through deep linking in the intermediate course.

[00:10:33]
We actually deep link into our app using the scheme. But we're not going to cover, and something that you should be aware about, is app links. And actually, if I go to the docs here, so if I do linking, there you go. So we got linking and deep linking.

[00:10:57]
Okay, so if we go to deep linking docs, this describes the more involved deep llinking, which basically verifies your URL. So it requires you to upload, there's instructions here, but it requires you to upload a special file on your website, and then you register that associated domain on your phone.

[00:11:16]
And then you can use iOS app links or the, sorry, Android app links or the iOS universal links. So those are the options, but the deep linking is basically the more low level and basic version of this.