Dynamic Routes

[00:00:00]
>> Kadi Kraman: Okay, so the last screen that we are going to add is the UI for a plant's details page. So it will look like this. So it will be when we tap on a plant, it will open a new page with the plant details, and it will have a button to water your plant and I added a little button to delete it as well.

[00:00:26]
So for this, we are going to use dynamic routes. So this is something that we haven't done before. So our routing in our app currently looks like this. So we have our index route. This is the home tab. Then we have our new route. So this is the modal for creating a new plant.

[00:00:46]
We have our profile page, so this is the profile tab, and we have our onboarding modal. What we want to add is a new route that looks like this, so we want a slash plants and we want a dynamic plant id, and this will render the plant D details page.

[00:01:10]
>> Kadi Kraman: So how do we do this? Currently, we have our tabs and our homepage is rendered as an index fruit and we want to convert this index fruit into a stack and in the intro course we did a similar thing with the counter page where we added a history screen where we converted it into a stack.

[00:01:37]
So converting an index page into a stack is a little bit different, because we can't create a folder called index. That wouldn't work. So we have to use another grouping root. So in this tab folder, let's create another folder and we call it Home. Now let's move our index file into home.

[00:02:10]
>> Kadi Kraman: And we'll add a little layout file here. So it will be _layout.tsx so this will be in home and export default function layout, and we'll render a stack, and a stack.screen. And Screen name is index. I forgot to return this.
>> Kadi Kraman: Okay, so now when I reload.

[00:03:00]
I'm getting a warning saying that there is no root named index. That is from the layout file in our tabs folder. And that is because, indeed, there is no screen called index. We are moved it into home. So we can rename this index into home, so it points into our home grouping route.

[00:03:24]
[COUGH] So now in this home tab, we are rendering a stack of a single screen, and yeah, you can actually see it because we have this duplicate header issue again. And again, this is quite common, we want to hide one of the headers, and in this case, we actually want to hide the parent header.

[00:03:50]
And the reason being is that the details page is going to be inside this, so where this index screen is, this will be the header. That will be shared by all the screens that are in this home stack. So if we were to hide this index header, then we would always see the home header, even if we were in the plant details page.

[00:04:15]
So fortunately, there will be a few more steps to do that. But let's go to the layout file where we have our header right and copy this. And then go to the layout file inside and go to options and add it here. So we'll need to update all the imports.

[00:04:42]
So we need link pressable and design.
>> Kadi Kraman: So this one, it is referred to do named imports. It's better for bundling. So theme, there we go. Okay, so this is inside. Actually, we don't need a margin that's this big anymore. So maybe change it to. Actually, do we need a margin?

[00:05:13]
Let's try it.
>> Kadi Kraman: Okay, so this actually looks good without the margin as well. Okay, and then let's give it a name as well. So let's do title of home. Okay, so we recreated our home header. Now we can hide it from the tabs layout file. So, from here, home, we can do header shown false.

[00:06:05]
>> Kadi Kraman: Okay, so one thing to draw your attention to, recall when I said that the main entry point to your expert router app is gonna be an index file. It's gonna be the route, level, index file, there's slash route. And we don't have an index file here. We don't even have an index file in our tabs.

[00:06:27]
Our index file is inside here, home. So if I copy the file path, copy relative path. So this is the relative path of our index file. But recall that app, this is just our route, it's not included in the href. All of the grouping routes aren't included, they are just for grouping.

[00:06:51]
And index is just the slash root. So this still translates to the slash root and that is the main entry point. That's why it is still the main entry point for our app.
>> Kadi Kraman: And to do a dynamic route, we can use angle braces. So what we wanted to do is, so we wanted to have a plant slash [INAUDIBLE] so the only way to add this segment is to add a folder.

[00:07:26]
So let's add a folder in home. So this does won't have braces, so this will be a plant. I think I just accidentally created a file. So we want a new folder called plant. And let's create our dynamic root so this will be plant ID.TSX. And this one so let's export.

[00:07:58]
Do I have a nice screen with a default layout. I don't think I do. Okay, let's type it out. Export default Plant screen.
>> Kadi Kraman: Export default function Plant screen let's just return a view with some text. So import view and text from React Native.
>> Kadi Kraman: Okay. I guess so for each of these plants, we have our components folder with the plant card.

[00:08:48]
So for the plant card, we wanna link to the plant details page.
>> Kadi Kraman: So here, let's convert this view into a pressable.
>> Kadi Kraman: And let's also wrap it in a link. So link is from Xperuta.
>> Kadi Kraman: And this href is going to be plants slash the Plant ID.

[00:09:24]
And we'll also need as child.
>> Kadi Kraman: Okay, so this should already, Plants ID. There we go. So this is already over opening this plant screen. So the question is, how do we get our plant id from the dynamic route? So if we go to our plants screen we can use, we can get the params from.

[00:10:00]
Use local search params, so if I console.log what this renders.
>> Kadi Kraman: It's gonna render four, three, two, one. So this is how you get the dynamic parameter from here. So notice that this parameter is called the same as what I call this in the races. So I can call this whatever I'd like.

[00:10:36]
And another thing that I wanted to show you is, how to dynamically add, change this header. So by default, we would like this header to be undefined, so do an empty string rather than this dynamic root. So in the home layout file, let's define a stack screen and name, so it is going to be PlantId.

[00:11:07]
And let's do options, and let's do header it's called title actually title and let's do an empty string. So by default we don't render anything and then in this plant screen we could use a use effect
>> Kadi Kraman: So make sure you add an empty array to the end to begin with.

[00:11:43]
And we want to use navigation from use navigation. So const navigation use navigation. And then we can do navigation set options. So this can set the screen options of the current screen, so we can set the title to be the plant name.
>> Kadi Kraman: So now by default the plant's going to be undefined, the plant name is going to be an empty string.

[00:12:18]
But actually, let me just, to make sure that we are being dynamic, let's use the params, or is it plant ID?
>> Kadi Kraman: There you go. So this is plant with ID four, three, and we're incrementing numbers here. So we're getting this correctly. Okay, so I think that's all the interesting things in this plant page.

[00:12:45]
So now that we've looked through those, let's actually copy this file. I think I did have it here somewhere.
>> Kadi Kraman: There we go. So I made this copyable because again, I don't really want to live code this. But I've pointed out all the interesting things, I think. So you can just copy the entire contents of the file.

[00:13:10]
I've forgotten to install my favorite library. So for this UI where we're formatting the date, actually this NA is going to be a formative timestamp. For formatting times you could use state functions or moment. I think it's popular as well. I tend to use state functions. I think most projects will have to deal with dimes.

[00:13:34]
I use this. It's just a nice utility library if we go to the documentation. What I usually use is the format. So this lets you format a date however you want, and actually, another handy thing is you can do a format distance at a strict or to now.

[00:13:54]
So this will give you in words a distance. So it will say about ten minutes ago and in a strict one, we'll say ten minutes ago. So there's lots of panda utilities there because working with dates is a nightmare. So let's make sure we install this.
>> Kadi Kraman: And npx expo start.

[00:14:28]
>> Kadi Kraman: And restart, reload. So hopefully, there we go. So we have some plant details UI and I should be able to water this plant. So you can see that this is where our timestamp comes in so we have a last water timestamp now, and let me just refresh to make sure that this is persisted, lovely.

[00:14:56]
So refreshed, but this is still read from local PC storage and I should be able to also delete it. So I think I added a little confirmation to delete it. And then it navigates back, and it's disappeared.