Build iOS App

[00:00:00]
>> All right, now that our app has loaded into X- code, so this is the native iOS development environment. It does a huge amount of things. There's various simulators, and there's profiling, and performance tracking. And the amount of features X-code has is kind of ridiculous, but we're just going to use it to run our project.

[00:00:22]
So here under devices, you can choose where you want to run it on. If you have your own device connected, you will see it here. I'm going to choose iPhone 12 and actually, first on a terminal, I'm going to start the packager. So there's two two parts of a native iOS app, you have the JavaScript bundle and the native app.

[00:00:44]
So I'm going to start run yarn start, to start the JavaScript bundle first, and then I get to export X-code, and hit play. So this is going to build the native app. The first time, this will take a little bit longer, but after you've done it a couple of times, the second time, it's going to go much quicker.

[00:01:07]
>> Why don't you choose CocoaPods instead of another pods dependency manager?
>> So there's kind of two main ones, there's CocoaPods and Cartridge. And actually, the choice is very easy for React Native, because React Native officially switched to using pods for dependency management. And so, if you do React Native in it, as we did, and they've already had pods set up, so they load the React Native dependencies by a pods as well.

[00:01:34]
So it's kind of a no brainer because if you wanted to use for example cartridge instead, you would then manually have to set it up. While we're waiting for this, I can tell you a little bit about the project structure. So if you go to the very first tab here that has the folder, this is kind of a folder layout.

[00:01:50]
Now, one thing to know about X-code is because it's an integrated ID, this folder layout doesn't necessarily reflect your folder actual directory layout on your Mac. Which is kind of frustrating, but it's something to be aware of. Also when adding files, you need to always do, new file or add files, cuz if you were to, for example, drag and drop a file into this directory, it would just link the file, but no actually move it into your Git repository.

[00:02:20]
So that's kind of a got share, that we as JavaScript developers kind of fall into quite a bit because in our editors, our editor folder layout, reflects what's actually in the device. Whereas on X-code, that's not the case. And here, so these two are objective C files. So we have the header file and the implementation file.

[00:02:44]
And essentially what's a React Native app, we use it from Template. All it's doing is, it's creating and it's just initializing the React Native and the JavaScript bundle. That's pretty much what it's doing, so here it is. Do you love bridge? We'll go over each view and then we launch it.

[00:03:02]
So throughout this course, we're going to be adding little bits of code into the IOS and the Android apps.
>> Do we need to configure native modules separately?
>> In this course, we will do, yeah. So we're installing several libraries that have native dependencies. And some of them requires to add bits of code into the Native files.

[00:03:31]
so for example, for a splash screen, basically anything that you can't launch from JavaScript. So for example, for the splash screen, you need to show the splash screen in Native code, and then hide it in JavaScript code. So it's just a one line thing, but I've added them here on purpose just to get more comfortable.

[00:03:49]
Cuz basically, if you're doing React Native Development without Expo, you will occasionally have to touch these Native codes. And the more comfortable you become with it, just the easier it will be in the long run. Cool, okay. So, our build failed, and this is actually to be expected.

[00:04:07]
And this is another thing that's pretty frequent when you're doing data development, because your environment keeps changing. So now we have a build error and this is actually something that I was expecting to happen. And I just wanted to illustrate that these things happen, don't worry, Google the error, things happen.

[00:04:26]
And the reason this is happening is because our development environment changed. So last week, I think, X-code 13 came out and this is X-code 13. And I think my Mac, at least, automatically upgrades to it and X-code 13 supports Swift by default. And our template app doesn't have any Swift files.

[00:04:50]
So what this is actually trying to do, is it's trying to load a swift file is going there's no swift in your project everything's terrible. So there's a quick fix for it and basically what we're going to do is, we're going to add a empty Swift file into our project.

[00:05:03]
So I'm just going to right click on new tracker, new file, Swift file, next, and I'm just going to call it dummy for dummy file, create. And now this is the bit that's important. It's asking me if I want to create an objective C bridging header. A bridging header is basically the way that you can interact between Swift code and Objective Swift code.

[00:05:30]
So if you wanted to write native modules, for example, for React Native and you wanted to do it in Swift, what you actually have to do is, you write your JavaScript code and then you bind it to your Objective C code. And then use a bridging header to bridge it to your Swift code.

[00:05:49]
Then we create a bridging header, this created this dummy file, and the bridging header.
>> You mentioned that in the future, the React Native template will probably resolve this. Correct, yes.
>> Yeah, it definitely will. I was thinking of doing a PR for it but I didn't want to do a last minute fix.

[00:06:08]
I actually thought it would be nice to show this on the workshop as well. Because if you're doing this in real life, for clients, these things will happen. And you just become more comfortable, you're like, okay, something's changed, is there a new version of one of the major tools that I use?

[00:06:24]
Okay, yes, there is. I can see what's going on. So it is kinda just part of being a developer and it's not at all scary. Right, looks like this has worked, which is excellent. So this is now bundling the JavaScript bundle here. Excellent, so one thing to note, and I've been doing React in development for years, and I never read these instructions.

[00:06:58]
But, if you're, for example, pressed R in the tab where your Metro boundary is, if you refresh the app, how handy is that? And same for D, you can open the developer tools. I think that only works on the real device. Cool, let's now swap and do Android.