How to Quit a React Native App on macOS

[00:00 - 00:15] We're going to take a small break from adding more features to our app. We're going to spend the next lessons polishing a little bit and preparing it for release.

[00:16 - 00:21] Most importantly, we have traveled the happy path so far. It looks like everything is working.

[00:22 - 00:29] But there are certain details that we haven't paid too much attention with. And now is a good time to discuss them.

[00:30 - 00:51] So among the things that we need to do to release our app, one of them, and this is different from releasing iOS apps, is that your app needs to have a quit button . This just needs to be in there because otherwise it won't pass the app review when you send it to the app store if you want to release your app to the app store.

[00:52 - 00:58] So we're just going to add a close app method. It shouldn't be too complicated.

[00:59 - 01:10] I'm going to go back into Xcode into my building apps native Objective-C file. And here I'm going to add another external method.

[01:11 - 01:21] This one I'm going to call the close app. And it's not going to take any parameters whenever you call it, the app is going to close.

[01:22 - 01:30] So now with that in place, I can go back into my Swift code. Again very similar to the previous functions.

[01:31 - 01:37] I'm going to go and create a function. The name is the same.

[01:38 - 01:48] And then I'm going to do this very funny thing. I'm going to call this patch queue main async and my code.

[01:49 - 02:00] So what's happening here? It turns out whenever you develop native functionality on macOS or iOS, you need to use certain queues.

[02:01 - 02:21] Anything that has to do with the UI of your application, you need to run on the main queue in order to keep the UI consistent and all the operations updating your UI without messing ups on the UI detailed, everything needs to run in a single queue in a single thread. So that's what we're doing.

[02:22 - 02:35] We're calling the dispatch queue.main and then we're saying we want to queue this piece of code to run at some point. After the OS is done updating the UI of our app or doing any other operation, run this code.

[02:36 - 02:48] Now this is important because if you don't use this and you try to do some UI operation, Xcode is just going to explode. It's not going to compile your app.

[02:49 - 02:59] Luckily it does say to you most of the time what's the error? It tells you you're trying to do a UI operation on a non UI thread.

[03:00 - 03:08] So in order to solve this, this is what you need to do. You need to reach into the main queue and queue your code to be run.

[03:09 - 03:17] Now how do we close our app? So we're going to grab our app delegate instance.

[03:18 - 03:47] This might not be 100% necessary but this is the way I chose to do things. Basically I'm just going to grab the app delegate the main file of our application which contains the initialization logic and that's the object that can actually close the application.

[03:48 - 03:54] So I'm going to take this app delegate and this is just type safety again. This exists on Swift.

[03:55 - 04:01] It could be an optional value but it won't be. Otherwise our application won't be running.

[04:02 - 04:07] And I'm going to call the close app method. Great.

[04:08 - 04:18] So now I need to go into my app delegate and it doesn't have any close app method. Right?

[04:19 - 04:41] Even though there is another function that's part of the application delegate protocol, I'm just going to wrap that because you might want to do something else whenever your application is closing. So I'm just going to create the close up function and I'm going to call NS app terminate with an else and there.

[04:42 - 04:47] Right? It doesn't matter to us who terminates the app, we just want to terminate it.

[04:48 - 05:00] And you will also notice that this time we don't need the objective CE decor ator because we're actually calling the code from Swift itself. Right?

[05:01 - 05:07] So this is just a plain Swift function. Let's try to run our application.

[05:08 - 05:20] Great. This is just the keychain operator.

[05:21 - 05:22] Great. Great.

[05:23 - 05:24] Great. Great.

[05:25 - 05:38] So now we can go back into our native module wrapper. And once again here, I'm just going to add the new function that we added.

[05:39 - 05:47] It doesn't take any parameters. It doesn't return anything.

[05:48 - 05:59] And in here, I'm just going to add it. Say my native module close up.

[06:00 - 06:08] Great. So what we can do now is I'm just going to put.

[06:09 - 06:11] A button somewhere. It doesn't really matter where.

[06:12 - 06:21] So I'm just going to do it on my books container. Here I'm going into.

[06:22 - 06:36] Yeah, it's not going to be too pretty, but I'm just going to put it in there. So the title is going to be quit.

[06:37 - 06:42] And I have my own press, my module. I need to import that.

[06:43 - 06:58] And I'm just going to call close up. Now another detail to pay attention to is that sometimes you might be able to bind directly like this into your prop.

[06:59 - 07:16] But sometimes this props pass values into the functions. And if your function takes a parameter or it doesn't take any parameter at all, and then this prop tries to call it with a parameter, then your application is going to crash.

[07:17 - 07:28] So sometimes it's just better to wrap your functions, your applications like this, right? Independently of how you think they're going to work.

[07:29 - 07:34] Just to make sure that everything works correctly. And let me try to save this.

[07:35 - 07:41] Okay, it's not very pretty. I can modify it later, but if I click on it, then the application should quit.

[07:42 - 07:43] (upbeat music)