Installing & Configuring Expo Router

[00:00:00]
>> Kadi Kraman: Next up, we're going to install a navigation library. So React Native doesn't come with navigation by default, so we need to choose one, and we're going to use Expo Router for navigation. Expo Router is a file system-based navigation library, and it's built on top of React navigation.

[00:00:17]
So if you're familiar with Next.js then, or libraries like that. And you probably already understand what file system based routing is. But basically it means that your file system defines the screens that exist in your app. Is that the industry standard as Expo Router or are there other routers that have generally been used in production applications?

[00:00:39]
So there's three navigation libraries for React Native. This React navigation. There's React Native navigation, which I think is less popular these days. And then there's Expo Router, which is built on top of React navigation. So the main two ones that are used right now, as far as I'm aware are Expo Router and then React navigation.

[00:01:04]
React navigation, if you don't want file system based routing, but Expo Router is the future, in my biased opinion [LAUGH]. So I've linked to the getting started docs here, and I've also copied the steps that we need to do. So first we install a bunch of libraries. So let's install these.

[00:01:32]
So we'll need Expo Router, this React Native safe area context. So this is to have the safe area on your screen. So this is handled automatically by the navigation library. So on iOS when you have the bottom and top of your screen where you can't actually put content because you have your status bar and your little notch, so this protects against that so you're only putting content in the visible area.

[00:01:54]
And distracting the screens, there's Expo linking, so this is because one of the good things, like amazing things actually, about React Navigation is that you get deep linking basically for free. It's a side effect, it's a benefit of doing file system based routing. You don't need to configure the routes because they are implicit from the file system, so deep linking for the first time in React Native becomes, I don't wanna say easy, but I'm kinda wanna say easy.

[00:02:22]
And we also have expo constants and an expo status bar. Now we need to set up the entry point of our app. So if you go to the package, JSON. So, if you have any JavaScript project that has a package JSON, it has this main field here. And the main is the main entry point for this application, for this library, for this whatever.

[00:02:46]
And by default, this is actually a link to a file in your node modules. So if you go to Expo and then app entry cde Expo and then app entry, just to see what this does. And basically all it does is it requires your main file, so your app.tsx, and then it calls register root component with it.

[00:03:13]
So if you used React Native CLI, if you use React Native to commute to cli to create a project. You've probably seen this, and it was in this index.js file, and then the main would point to index.js. And it's just a convenience that is just like abstracted the way so you don't have to have your index file.

[00:03:34]
It is only to know that this exists because there are some React Native libraries that require you to do something before calling register root component. In which case you could copy this content into an index file and then change your main entry point to your local file and then do additional things.

[00:03:52]
This is just an FYI of what's happening behind the scenes, and we need to change this into, I didn't actually copy this. We need to change this into expo router/entry, which is this, and in this entry point we go to our node modules and look for expo router,
>> Kadi Kraman: Expo router, and entry.

[00:04:18]
So, you can see that this actually does some additional things. So the root of our app will change to be our app folder. And this does some additional things to pass the initial screen for us. But in the end, it also calls the render root component. So again, if for some reason you needed to change this, you could move this into an index file in your application, but for now it is handy to have this abstracted away.

[00:04:46]
>> Kadi Kraman: Next, we'll need to update our project config to provide a scheme. So if we open our app JSON. So this is a config file for your app and we'll add a scheme field, and a scheme is basically, the reason this is required is because, as I mentioned, deep linking is set up by default with expo router.

[00:05:10]
And deep linking is basically linking into your app to a specific screen. And the way deep linking works on mobile applications is basically that your mobile app registers to listen to let's say a particular keyword. So when a link comes in, so there will be like plantly:// then your phone will go, okay, as anyone want to handle this link.

[00:05:35]
And if your application has registered to handle this scheme, then it will say yes, can you give it to me, and basically that's why we need to handle this. So this can be anything you would want to make this probably like relevant to your app. So you want to make this as unique as possible but it is not possible like multiple apps can have can be registered to the same scheme.

[00:05:56]
So for example if you open, you see it more on Android actually. So on Android, if you open something that should open a web browser and you have multiple web browsers installed, you might have seen this pop up that says, do you want to open this with this, this or this?

[00:06:11]
And then that's because it's multiple apps are registered to use the same scheme, so you need to choose. And on iOS, this is unfortunately handled kind of mysteriously in the background where iOS just chooses an app for you to open. So this step is optional, and we're not going to be focusing on web in this workshop, but I wanted to show you that reconning into web is actually set up by default.

[00:06:39]
So you can run everything that we're building on the web. So you do wanna try this, let's install these libraries. So we want React Native to web and react on, and also in our app JSON, we want to make sure that the bundler is set through set to metro.

[00:06:58]
So if we, open our app JSON, and then under web, make sure that we're using metro.
>> Kadi Kraman: Lovely, and now we removed, so we changed our main entry point. So we now also need to change where our app components are rendered. So let's create a new folder called app.

[00:07:26]
So this is non-negotiable. If you're using Expo Router, the root of your app is the app folder. And in particular, let's move this app.TSX into our app folder and rename it index.tsx.
>> Kadi Kraman: So the root, the main screen, the first screen that your app opens if you're using Expo Router, is the route`s label index file in your app folder.

[00:07:58]
So if you don't like using index files, you can actually get around without using most of them. The only one that you absolutely need is this root index file. Let's npx expo start again.
>> Kadi Kraman: Lovely, okay, so if you've done everything correctly, everything should look exactly the same.

[00:08:28]
And this is great. And the reason it's looking exactly the same is that we've not added a layout file. So if we add a layout file, we can actually get a little header. So let's do an _layout.tsx. And let's import stack. This is from Expo router. So all the screens, so there's two kinds of things that you can have in your app folder.

[00:09:00]
You can have screen files and layout files. And for each of them, you always have to use default exports. So I'm going to use export default function. This can be a constant function if you like, and you can name it whatever you like because it's the default, I will name it layout.

[00:09:22]
>> Kadi Kraman: And here we're going to return a stack. And inside the stack we're gonna define our screen. So let's do stack.screen. And the name will be the filename, so the index. So if I save that, you can see that I get a nice little header here. And by default, the name on the header will be the filename.

[00:09:52]
But we can customise it using this options prop. And with options title, we can set it to whatever we want in this case let's do home. All right, so this is on iOS, and you just also open this on Android.
>> Kadi Kraman: There we go, we got the same thing on android.

[00:10:33]
You notice that on android, the header bar looks slightly different, so we got a slightly different elevation here and also the text is floated left. And that is not a bug or a mistake, that is on purpose. So the navigation library uses platform specific defaults. So you can change these defaults and you can make your apps look the same, but by default it will use things that are more appropriate for the platform.

[00:11:00]
And lastly, we set up all our web stuff. So in your terminal, if you type w, it should open a web browser. And this is the app that you are building, the same thing, using interactive web running in a web browser.