Quick Actions

[00:00:00]
>> Kadi Kraman: For the last bit of coding work, let's do something that very much wouldn't be possible without development builds. We're going to add a quick action to our app. So a quick action is basically a little dev menu that opens when you press and hold your app icon.

[00:00:17]
We scroll down to the quick action's demo here, you'll see what it looks like. So, we're going to add a little option here, where you can add a plant directly from your home screen. So when you open this, it will open the new plant module directly, and you can start filling it out.

[00:00:40]
>> Kadi Kraman: For this, let's install expo-quick actions with MPX expo-install expo-quick actions.
>> Kadi Kraman: And for this, we'll need to use the config plugin. So, recall that config plugin is used to add things to your native project during pre-build. In this case, we actually need the config plugin for this little leaf icon on Android.

[00:01:13]
So, on iOS, this leaf icon is an icon from SF Symbols. So the quick action items on iOS use SF Symbol icons, and you can use any of the symbols that are available here and a leaf exists.
>> Kadi Kraman: For Android, however, we need to pass in an image that gets bundled with the app.

[00:01:46]
>> Kadi Kraman: So here is a leaf that I made earlier, let's download the leaf.
>> Kadi Kraman: And let's move it into our assets folder, so it's in my downloads, move it into my assets folder, and then in my app.json. So you should already have x-ray quick actions here, so this would have been added automatically when we runthe expogo still works with quick-actions.

[00:02:22]
But we want to pass in some additional parameters, so let's convert this into an array. The first item will be expo-quick-actions, and then the second will be an object, and it will be Android icons, you can pass in, you can do multiple. I will just do the one, and we're going to name this leaf.

[00:02:50]
So this name is what you're going to be using to query it by. And we'll pass in a foreground image, and this foreground image will be the link to our leaf icon, so assets, leaf.png, and the background color, let's leave it at as white.
>> Kadi Kraman: Lovely.
>> Kadi Kraman: So now, we will need to pre-build our projects again.

[00:03:36]
So, every time you add a library or edit anything in your app.json, you'll need to run pre-build again to regenerate your native projects, and then run iOS or run Android. So it is the script here to rebuild the native apps.
>> Kadi Kraman: So let's do mpx expo prebuild clean.

[00:04:09]
I will prebuild both at the same time.
>> Speaker 2: We didn't have to do that with expo go because that was already pre-built you were just using the JavaScript bundle, that's the reason-
>> Kadi Kraman: Exactly, so expo go has a bunch of libraries already pre-installed ready to use. And that's why, for example here, if we started with a blank typescript template and we converted it into a development build and then loaded it on our app.

[00:04:35]
And then, we installed expo router, we would need to do a prebuilt.
>> Kadi Kraman: So, we didn't go because it was pre-installed. And that's actually also the reason that when you're starting a new project, it makes sense for the first, just a little bit of time, maybe a couple of hours or maybe a couple of days when you're just getting started like installing a bunch of libraries.

[00:04:59]
It is quite quick to do it in Expo Go for that reason. And then, you read something like, I need to use, I don't know, Expo Quick Actions, or Vision Camera, or Custom Fonts, or I want to actually see an app icon instead of the Expo Go icon.

[00:05:15]
And then you'll do a development build. But then, by that point your project is mature and you're not rebuilding it natively so often. So, once it's a mature project, you will do it maybe a couple times a week.
>> Kadi Kraman: And now, we want to run Android and or run iOS.

[00:05:36]
So mpx-expo, run android, and I will do iOS on another tab.
>> Kadi Kraman: Okay, now we have both our iOS and Android project rebuilt. Great, okay, so now when we press and hold, this is what we're starting with. We just have our default options here. The way we add them is using a use effect in a layout file.

[00:06:16]
So let's go to our root layout file, so app layout. And here, we want to add a use effect.
>> Kadi Kraman: And we only want to run this once when the app first loads. And let's import star as Quick Actions from expo-quick actions,
>> Kadi Kraman: And we'll do quick actions set tems, and this will take an array of the items you want to add, so you can have multiples.

[00:07:05]
I think there's recommendations to not add more than three or four, so don't go crazy, but one or two is definitely fine. So, this will actually be an array of items, so we will add the title, add a plant, and the icon, so this is why we did our whole adding of the Android icon.

[00:07:32]
So we'll do, if platform.OS, if we are on iOS, then we're going to use symbols this is just special syntax, it's got autocomplete that's amazing. I was not expecting this, so symbol leaf, well, it actually works as well, this is amazing I guess. So this is one of the SF Symbols for iOS.

[00:08:04]
And on Android, we are using leaf. And this leaf comes from our config plugin, which is here. So this is what we named our special icon that we passed in with the config plugin. So that's why we're using leaf.
>> Kadi Kraman: Let's give it just an ID.
>> Kadi Kraman: There we go.

[00:08:31]
So, it does mean that the user needs to open the app for the quick action to be configured. And that is to be expected, that is totally fine. So, let's reload.
>> Kadi Kraman: So not sure if I ever mentioned it, but if I'm working on simulators, then you use Ctrl command Z on iOS.

[00:08:56]
And I think that's the shake gesture, it will bring up the dev menu. So I think command R. No, command R records, everyone's done that before, so I always use Ctrl Command Z, it's just a reflex, but on Android emulator is actually different it is Command M to reload.

[00:09:20]
So that's a fun fact. Actually I have another fact about these because I have both of these open right now. Who knows what's the difference between a simulator and an emulator? So for our purposes, the thing that's important is that an emulator emulates the whole hardware environment as well.

[00:09:38]
Well including the restrictions so an Android emulator will have as much memory as the actual Android phone whereas an iOS simulator only simulates the iOS environment and in our case the reason it's important is that actually it has access to the underlying device memory so if you're ever debugging a memory issue on iOS, then it is preferable to do it on an actual device because the simulator will be more powerful than a real device of the same kind, because it's using your max memory.

[00:10:13]
So fun fact. Okay, so now we're instead of my quick action, so if I press and hold, I'm actually seeing this add a plant option, which is awesome. And then I open this and it opens my app and not my add plant model, which is annoying. So So how can I get it to open the new modal?

[00:10:46]
>> Kadi Kraman: When we set the params, set the items for the quick action. We can also give it additional params. So let's add a params which is an object and let's give it an href to where we want to go. In our case, let's go to the new tab or new modal.

[00:11:13]
And if you're not using expo router, you can use hooks to manually hook into the event of coming to the app from a quick action. But actually because we're using Expo Router, we have a handy utility function that handles this automatically. So we can use useQuick.
>> Kadi Kraman: Okay, I guess I'll have to import it manually.

[00:11:45]
So we want to import useQuickActionRouting from expo-quick-action -actions/router.
>> Kadi Kraman: And this is just a convenience function specifically for expo router. And we call this, it's a hook, so we call this in our route layout file. And if you pass in params with an href so the naming is important here.

[00:12:20]
Then it'll automatically link to that page.
>> Kadi Kraman: So let's make sure that we reload it so that the effect has rerun.
>> Kadi Kraman: Hopefully, if I do add a plant it opens the modal. Let's try this on, whoops, double click that instead. So let's try this on Android as well, add a plant.

[00:12:53]
It opens the modal. That's really exciting. So we've now deep linked into our application from a quick action. I really love building this because it's something that it feels so native. It's kind of amazing that we built this with JavaScript.