How to Start Building a React Native iOS and Android App

[00:00 - 00:17] Okay, so let's jump into some coding. In this module we'll build the boilerplate code that we talked about in the previous lesson and we'll run it using Xcode and Android and we'll also run it using terminal.

[00:18 - 00:29] There's no specific benefit of using either. It's just that people tend to have references and all of them work fine.

[00:30 - 00:32] So let's get started. The first step is to clone the repository.

[00:33 - 00:42] We could also download a zip from the boilerplate GitHub repo. We'll be loading the repo.

[00:43 - 00:59] So let's do that. Next, let's get inside the repository and if you follow the instruction it says we need to do yarn install or npm install.

[01:00 - 01:06] So let's do that. This is a command.

[01:07 - 01:15] Just remember this. Every time we do development we have to start the Metrobundler and the command for that is yarn start.

[01:16 - 01:32] So as a first step we'll try to run this on iOS and we'll need Xcode for that. So let's launch Xcode and then we need to go into the iOS folder.

[01:33 - 01:39] Remember the application has iOS and Android folders at the root location. Just go into the iOS folder and do power install.

[01:40 - 01:55] This is the one time step. So let's just go to the iOS folder and do pod install.

[01:56 - 02:04] Then we need to open Xcode and simply run the project from there. Now let's look at a few things while we are here.

[02:05 - 02:10] So this is your Xcode interface. We'll not need much of it unless you want to run your React Native applications through Xcode.

[02:11 - 02:20] It's totally a personal preference. This is basically the project and if you want to change your simulators you can do it from here.

[02:21 - 02:35] If you want to add any additional simulators it will we can do it from here. Then if you connect a real device through USB that will also show up over here and it says no device is connected but if you connect it will show up over here.

[02:36 - 02:41] So let's see if our pods are installed. Yes they have.

[02:42 - 02:51] So we'll just build the project. Now doing this for the first time will take some time to get this done.

[02:52 - 02:58] So once the project is built let's continue from there. Okay so I'm back.

[02:59 - 03:03] The project is built. Let's just run it.

[03:04 - 03:16] And it should open the simulator while that happens let's also start our run bundler. Remember we need to start the bundler before the project starts on the simulator.

[03:17 - 03:36] As we can see here the bundler has started and we can press R anytime to reload the app and we can press D for the developer menu that helps in debugging the entire app. We'll go over what are the different debugging options in React Native in one of the later modules.

[03:37 - 03:43] We'll cover it extensively. Again there are multiple choices and not one answer.

[03:44 - 03:50] Now as we can see it was trying to load the bundle and it has loaded. So there we have our app.

[03:51 - 03:57] This is the initial splash screen. If you want to reload the app just press R twice.

[03:58 - 04:05] Once this will be selected and it will reload the app. So let's continue to the application and we have our home screen.

[04:06 - 04:17] So this is the tabbed navigation and we have two screens over here. So let's try and make a small change and see how the live reload works.

[04:18 - 04:27] So this is the splash component and we have the button that's called continuity app. Let's just call it just continue and save and that should reflect immediately.

[04:28 - 04:42] It was quite fast right? So next let's look at the same using Android Studio.

[04:43 - 04:56] So in case you run into any issues with iOS or Android setups I've tried to add the common errors over here like for iOS one of the most common ones is pod not found. That means you don't have go-go pods installed in your system.

[04:57 - 05:07] So just follow the steps for that and remember to do pod install just one additional step that's required for iOS. For Android the initial steps are the same.

[05:08 - 05:16] We clone the repo. We do npm install and from there let's do it from the Android Studio.

[05:17 - 05:35] So it's quite similar to how we run code with Xcode. We just build the code and run it.

[05:36 - 05:49] We can keep the bundler running as it will also be required with Android. So we have our Xcode Android Studio and all we need to do is just press this run button.

[05:50 - 05:58] The app is already selected. Now remember to load the Android folder from the project as we can see here and the root the Android folder.

[05:59 - 06:19] So that needs to be loaded in Android Studio and all we need to do is press run and it should start the simulator that we had selected over here. It's quite similar again to Xcode and we have our devices here and once we connect a real device using USB we'll start showing up here.

[06:20 - 06:29] One additional thing once you connect a real device it sometimes it might not show up. The reason for that is we need to enable USB debugging.

[06:30 - 06:38] So it took some time to build the app for Android Studio and install it. It does that automatically and launch.

[06:39 - 06:46] So I've skipped that part but it's pretty much the same. Just press the run button and it should work and we can see a very similar experience.

[06:47 - 06:59] So let's check the library load over here. Let's again change the text to continue and it should reflect in the app and it says refreshing and there we have it.

[07:00 - 07:11] So yeah pretty much the same right. So again for Android 2 I have added the common errors here.

[07:12 - 07:33] So next let's look at doing the same thing using CLI. I find that to be the most preferred option that I use because I don't have to launch Android Studio and Xcode because working on React Native we practically don't need to do anything there and they take up a lot of memory.

[07:34 - 07:52] So using CLI is also quite straightforward if we move to the iOS section. Using the terminal all we need to do is we need to run this particular command react native run iOS for Android it's run Android and then we pass in the simulator name.

[07:53 - 08:07] So let's just do that. We need to have the bundler running.

[08:08 - 08:28] So I'll just open a new tab and the root location remember and just run the command. Now remember this the name of the simulator that we pass in that should exist in our system otherwise this command won't work.

[08:29 - 08:38] Just check for that. Now one way to find the simulator install into system is by running a very simple command.

[08:39 - 09:00] X runs MCTL list and will give you all the simulator that I installed. So here I picked iPhone 11 and the first time this command may take time and remember us we are running the code using CLI but that doesn't mean that we don't need X code installed in the system.

[09:01 - 09:09] We do need Xcode in the system. So do install that and update it and as it check just run Xcode once.

[09:10 - 09:28] What I'm saying is we don't run the code using Xcode once but just run it launch the Xcode application once. The first time we launch Xcode will try to install additional tools that are required run these commands and build Mac app and iOS apps using CLI.

[09:29 - 09:35] So that is required. So there we have and so this is also preferred way.

[09:36 - 09:49] You can simply run one command from the terminal and it works. Let's try the same for Android.

[09:50 - 09:53] So it's quite similar for Android. The command just varies a little.

[09:54 - 10:05] We again have our React native and then run Android. Now here we have a variant if you want to run in debug mode or in release mode and instead of simulator we are saying device ID.

[10:06 - 10:18] This is again a device ID and it's some simulator that needs to be installed on your system again and one way to find it is using this command. It will list down all the simulators in your system.

[10:19 - 10:31] Let's try and run this command. The one difference between Android and iOS using CLI is that when we launch the command for iOS it launched the simulator, installed the app and then kick started the app.

[10:32 - 10:41] In Android we have to launch the simulator separately and then run this particular command. So let's run the simulator first.

[10:42 - 10:54] The command for that is quite similar to this one. So it's basically going to the emulator folder and then -avd and then the device name.

[10:55 - 10:59] That should start the simulator for us. Next let's copy the command.

[11:00 - 11:19] We don't need to copy the device ID because we only have one simulator running so it will automatically install our app in that and launch it. It's quite similar to iOS except that one extra step of launching the simulator first.

[11:20 - 11:31] So again building this for the first time it will take a little longer. So let me just jump to that and I'm back.

[11:32 - 11:42] It does take a little bit of time the first time we do it though this is all also a lot dependent on the kind of machine that we are running. We just saw the different ways of running the app.

[11:43 - 11:53] We just wrote Xcode or Android or terminal. To summarize if you want to use Xcode just open the app name.xc.us project in the Xcode and run it.

[11:54 - 12:19] Don't forget to start your Metrobundler for Android just open the android folder and run it again quite simple for CLI start the Metrobundler and for iOS just run a single command that we can find here. And for Android run the simulator first and then run this command.

[12:20 - 12:39] As I said earlier through the rest of the course we'll be building an e- commerce app. Now we'll not be building the entire app but major parts of it like the home page, the app and a little bit of card and I'll leave the rest to the students to complete as we have covered we would have covered most of the aspects of building app using React Native.

[12:40 - 12:52] The important part is to understand how these pieces fit together and it's not just about extending our jobs to expertise. Now that's an obvious goal but it's also about how do you build an app?

[12:53 - 13:06] How do you start from a blank slate and take the journey of building a production app? As I like to call it from storyboarding to production and with that goal in mind I'll see you in the next module.