Deep Linking

[00:00:00]
>> Kadi Kraman: That was it for the main coding parts of this workshop. There's a couple of important topics that I wanted to cover in addition to this. And the first one is, let's talk about deep linking. I mentioned earlier that thanks to Expo Router's file system based routing, we get deep linking out of the box.

[00:00:19]
But what do I actually mean when you say that? So, because we have these constraints around how we define screens and layouts in our app folder, we can easily distinguish each screen with an href. And because of that, building deep linking out of the box is not only possible, but achievable, and, well, I don't want to say trivial, but Expo Router supports it.

[00:00:52]
So this means that Expo Router can and does support deep linking out of the box. So what is deep linking? As we've seen with our quick action, it means opening a specific page in your app from outside of the app. Add apps register to listen to a specific scheme.

[00:01:12]
So a keyword, recall that at the very beginning of the course, we set up the scheme in our app.json. So this is the scheme for our app, and this is the scheme that our app is listening to.
>> Kadi Kraman: This looks similar to http and mailto and tel, and this is because it's the same kind of thing, so it kind of files an intent for the various apps to listen and hook into.

[00:01:39]
So in our app, plantly:// will open the homepage, but we can also specify which screen that they be linked to based on the URL. So, we can actually use the href, and it is something that you get out of the box because of Expo Router. If you're using things like React Navigation, you can configure it, we have to do it manually.

[00:02:00]
So, there is a nice utility that you can use to test deep links on a simulator or an emulator. The reason I set up these plant IDs to be numbers is that we know that this first one is 1 and this second one is 2. So, I don't have to log out the IDs to link to them.

[00:02:20]
So let's copy this.
>> Kadi Kraman: So mpx-ui-scheme, I'm going to open Plantly, actually, let me just open Plantly as an app. So this should open just the homepage.
>> Kadi Kraman: Lovely, and then if I do Plantly, now I can link to any of the routes that I've configured in my app.

[00:02:53]
So I can do plants/1.
>> Kadi Kraman: And then it opens the particular plant. So in my examples, I've linked to plants, but you can actually link it to any of the screens that we've defined here. So we've got our profile screen, so I could,
>> Kadi Kraman: Also do /profile.
>> Kadi Kraman: It opens the profile screen, and it should be the same for Android, so if I background this,
>> Kadi Kraman: Let's do Android, it opens the home screen.

[00:03:41]
>> Kadi Kraman: And then let's open the first plant.
>> Kadi Kraman: Android.
>> Kadi Kraman: Yes.
>> Audience 1: If we try to go to, I forget if it was the index, does the logic, if the onboarding hasn't been complete, will it redirect to the onboarding, or will it get through?
>> Kadi Kraman: That is a great question.

[00:04:08]
I think, right now, let's try it. So we're on iOS, and we're in onboarding.
>> Kadi Kraman: So let's go to plant. So it does go to onboarding. So why does it do that? So the reason it's doing that is that we are trying to render plants/1, which is this screen.

[00:04:40]
So when you think about how things are rendered, the best way to think about it is actually go backwards. So this is the screen that we are requesting. So, this is actually the last thing that gets rendered. Before that, we get this layout file. Before that, we get the layout file of the parent.

[00:04:57]
And before that, we get the layout file of the parent. So it actually renders in this order. So this layout file, this layout file, this layout file, and then plant ID. And then our redirect is being done in this layout file, so that's why we're getting redirected. That was a great question, though.

[00:05:15]
>> Audience 1: All right, that kind of leads me to another question. So what if you deep link into to a screen that's part of a flow, and then there's a back, and then there's a forward in that screen cuz it's part of a flow. And based on the logic you went through with layouts, it's probably a good design to say have a layout in case they hit the back.

[00:05:35]
But they deep link into like three out of five screens, they deep link to the third screen, but then they hit the back button.
>> Kadi Kraman: Right, okay, so this is actually another great question, but let me show you, actually brings me to a behavior that we will need to fix.

[00:05:57]
>> Kadi Kraman: Which is if I completely close the app, and then I'm gonna link to a plant screen, so on here, right. So on home screen, I've linked to a plant screen in home, so recall, we usually go, we tap on a plant and then we navigate to the plant screen, but there's no back button here.

[00:06:20]
And the reason is that this is rendered in a stack, and this is the first item in a stack that we're rendering. And the way to get around it is that we can use the initial route name. So, I think people find the initial route name misleading. Because they assume that, I can just set this screen to be the initial route name, and then that gets rendered instead.

[00:06:46]
But that's not what happens, we get the index screen gets rendered by default. So, the initial rendering, this is the perfect use case for it. Let's go to the layout file in app tabs home, so it's a layout file that has the plants and it has the index file, yes, this is a correct one, so here we'll do an export,
>> Kadi Kraman: const unstable_settings.

[00:07:20]
So the reason it's called unstable settings is that it doesn't work with async routes at the moment, which is in beta. But we are not using async route so it is totally fine to use, and we can do initialRouteName index. I misspelt this, initial. [COUGH] So this is now saying that in this stack, regardless of, so you should be starting with index, hopefully.

[00:07:52]
But if you are not rendering index, make sure that index is rendered underneath. Now, if I close this, and I open it again.
>> Kadi Kraman: We actually see I do get this back button, and I can go back to the index page.
>> Audience 2: Is there a way to know that a user has deep linked into a page, like for analytic purposes, or if you wanted to track that this page view came from a deep link?

[00:08:24]
>> Kadi Kraman: Yes, I'm not sure I know this off the top of my head, but I will try. I think it will probably be in linking. So linking.getInitial URL, let's try that. So console.log(linking.getInitialURL).
>> Kadi Kraman: So where is, okay, so this is where we are building. And open this.
>> Kadi Kraman: Okay, well, this is not a very useful function, it's not asynchronous.

[00:09:07]
[LAUGH] I was expecting this to be, it's a promise. Okay, I was trying to be lazy, but the world isn't having it. Okay, useEffect.
>> Kadi Kraman: getInitial,
>> Kadi Kraman: And what do you want?
>> Kadi Kraman: linking.getInitialURL, so what do we got, we got sendIntent, openURL, yeah I think that might be it.

[00:09:56]
>> Kadi Kraman: Okay, right, okay, so now that we've actually awaited it, we do get it. So linking.getInitialURL will tell you what the user deep linked into the app with. So that's what you can use.
>> Audience 2: If they didn't link, I'm assuming that the routing history won't have anything. And it'll be an empty array or it'll be for the go back, it'll nothing to go back to.

[00:10:25]
At that point, would you be able to use that hook to conditionally render like a different button in the top. If you didn't want to set what you did for the home there?
>> Kadi Kraman: I see what you mean. Yeah, yeah, you could. Yeah, so you could use the same useEffect here.

[00:10:40]
So we have our setOptions, so you can programmatically set the screen options, which include all of the top bar stuff.