iOS & Android Development Builds

[00:00:00]
>> Kadi Kraman: So to move from Expo Go to development builds, we first need to install the expo-dev-client package.
>> Kadi Kraman: And actually what this does is if I open my dev menu. So it's a package that brings this to your app build, so this dev menu. So this dev menu is part of Expo Go, but if we want it in our development build, we need to install it as a library.

[00:00:29]
So that's what we're doing.
>> Kadi Kraman: So let's do npx expo install expo-dev-client.
>> Kadi Kraman: So now we need to generate our native projects. So if we look at our app currently, we only have JavaScript code. So everything we have is just JavaScript and some assets. And if you've ever created a React Native Project with the React Native Community CLI, so you're used to seeing these iOS and Android folders.

[00:01:05]
So that's what we're generating. The command to generate these is npx expo prebuild, and you can use npx expo prebuild to generate it for both of them. Or you can use --platform ios or --platform android to generate it for a specific project. So let me do them separately, so let's do npx expo prebuild platform ios.

[00:01:33]
And now because this is the first time I'm doing it, it is asking me what I'd like my iOS bundle identifier to be. So, a bundle identifier is like your app ID. It needs to be globally unique, and the convention is to use a reverse URL format. So, for example, if you owned example.com, then your bundle identifier might be com.example.myapp.

[00:02:05]
I'm just gonna keep the default, which is com.expokadi.plantly, and now this has created my iOS directory, and in case of iOS, it's also installing CocoaPods.
>> Kadi Kraman: And if you've ever built a React Native CLI project, you're probably familiar with this folder structure. So we have our Podfile, we have our Pods, we have our xcode project.

[00:02:37]
So we can actually open this in xcode. So we have AppDelegate etc.
>> Kadi Kraman: I don't usually use VS Code for entering commands, it's a bit cramped. All right, let's do the same for Android. So npx expo prebuild --platform android, so if you're building for android, do this one.

[00:03:06]
Similar to iOS, it's asking us what we want our package name to be, it is a convention in React Native to use the same package name for both. And this is creating my android directory, so the android folder now has the usual suspects. So again, if you've used React Native CLI, then you would have seen this.

[00:03:29]
There we go, I've got my main activity here. So this is just a typical, native Android and iOS project. I just wanted to show you that's these, what we have added here, this package name gets automatically added as a bundle identifier and then the package in your app.json.

[00:03:55]
So, what we've done here, this process is called continuous native generation. And it is a term that Expo have coined and there is a documentation here that explains what it is and what it does. But the idea is is that it generates the native projects from a set of inputs.

[00:04:20]
So think of your native projects same as you do your Node modules. You're not gonna commit your Node modules, you have a lock file, and then whenever you clone the project, you run npm install or yarn install to install those Node modules for that project. And with continuous native generation, we actually want to do the same with our native projects, so we should add them to our gitgnore.

[00:04:49]
So iOS and Android.
>> Kadi Kraman: So this is so that you wouldn't commit them to Git. So the idea is that whoever is building this, if you're building this on CI or you're building this locally, then you will generate native projects with prebuild, and then away you go. The benefit of that is that if you need to change anything in the native projects, you don't need to shift through any of these native codes, native files.

[00:05:22]
And also, if you've ever done a React Native upgrade with the React Native Upgrade Helper. All of that pain goes away because we simply bump the React Native version, and install the new version of Expo and regenerate our project. So we don't have to manually edit any of the native code.

[00:05:44]
So now to build your native app, at this point, you should have your local environment set up. If you're having difficulties, I find the React Native documentation for a local environment set up really useful. So there's always some nuance somewhere that isn't working, but usually you get around it by googling.

[00:06:10]
So you should have xcode. Let's build the iOS app first. You can check that you can run a simulator. This is only available on Mac OS. So if you Cmd+space and do a simulator, then you should be able to launch a simulator. So it's a nice way to check if the simulators are working.

[00:06:33]
And also on the side menu, here you can choose different simulators that you might have installed. So now to actually run this on my simulator, so this is the building the native app part.
>> Kadi Kraman: We can do,
>> Kadi Kraman: I'm gonna do yarn ios. Rather, actually, let me just use this command.

[00:07:07]
So npx expo run ios. So this will now do the native build for me and it will take a little while.
>> Kadi Kraman: Can you do multiple terminals here, you can, okay so at the same time because I like to stress my computer, let's also do npx expo run android, so I'm building both of them.

[00:07:41]
So Android should open on my Android Emulator, which is here. So this is one that I've set up earlier. And actually, let me show you on Android Studio. Hopefully you've done this step already from the React Native documentation. But open in the studio, the way that we generate,
>> Kadi Kraman: Virtual Devices is on here.

[00:08:06]
It's really hidden in this little three dot menu. Then you do Virtual Device Manager, and then here you can create a new device. There's a button for creating a device, so you can choose a device, you can choose the API level, and it will create it. And this is also the place that you launch it.

[00:08:24]
So a lot of the time the emulators aren't launching properly. So like dynamically from the process automatically. So all the time they do, sometimes they don't. If they don't, you can go to the device manager and just launch it from here. And the same for the simulator. So if the simulator isn't opening you can open it manually with Cmd+space simulator.

[00:08:54]
>> Kadi Kraman: And now we wait. Okay, looks like Android has won even though I've started it later. So this is my Android app. There we go. We've got iOS as well, and we've got iOS running on my simulator. So let's look at Android first.
>> Kadi Kraman: Yeah, there we go.

[00:09:25]
So this looks exactly the same as our Expo Go app. The difference is, if we now go to the home page and find where it's rendered.
>> Kadi Kraman: Here you go. So instead of being in Expo go it is has its Its own app icon and own app name, and when I click that, it opens.

[00:09:47]
So this is what I mean about we created our own native app bundle. And then the same for iOS. So if I now background this, so previously we were loading this in Expo Go. And now, we have our own separate app icon and separate app name.