How do you start your app on your simulator in the morning? Do you always run react-native run-ios? If so, you might be wasting a lot of time. Let’s check out together what a React Native app looks like under the hood. It will help us to be more efficient on a daily basis. We’ll identify the shortest steps to execute daily actions, like starting our apps as fast as possible (no more unnecessary compilations of native modules!), or dealing with pesky red errors that metro throws at us.
What Happens When You Build Your App
AI Generated Video Summary
1. Introduction to React Native Development
Hi everyone, I'm Charlotte, a React Native Tech Lead at BAM. Today, we'll dive deep into your application, understand what happens when you build it, and learn how to be more efficient. Let me share a story. One day, I encountered a big error and didn't know how to solve it. I used to kill everything and start from scratch, wasting time. My colleague advised me to understand what's happening inside the black box. That's what we'll do today. A quick reminder: React Native uses core components instead of HTML elements. Let's start!
Hi everyone, I'm super excited to be talking to you at React Advanced London. I'm Charlotte, I'm a React Native Tech Lead at BAM, and today we'll dive deep inside your application. We will study the inside of your app and what happens when you build it. And then we will see how we can use this information to be more efficient on a daily basis. But let me tell you a short story before.
One day I was working at my desk and one big red error appeared on my screen. The kind of error that I didn't understand and I didn't know how to solve. This day I did what I used to do every time back then to fix it. I killed everything. My app, my simulator, maybe even my metro server. And after that second step, I relaunched everything from scratch, brand new. I ran Yang install, Pod install. I rebuilt my whole app. I didn't understand what was happening inside my simulator. So I wasn't able to identify what piece of the puzzle was failing. So I started everything again. And it worked. But it was wasting a lot of time. And this day, one of my colleagues passed by and saw me killing everything without any pity. And she advised me to try to understand what was happening inside this black box. So that's what I did. And that's what we are going to do today.
2. React Native Development Process
Now, let's take a look at the Native part. On the Native side, we have some Native code, either Swift and Objective-C on iOS, and Java and Kotlin on Android. If you open your app in your IDE, you will see an Android and an iOS folder. And in this iOS directory, you've got everything you need to create an iOS application. If you are building one in Swift, you would, in fact, be working within this directory.
Before we continue, I had one quick question for you. How do you start your app in the morning? Do you by any chance happen to always run React Native Runner OS? I hope not. No, wait. Actually, I do. Otherwise, I'd have nothing to teach you. Anyway, that's what I used to do. But it wasn't the most efficient way to start my day. For the ones of you who are working on the web, React Native Runner OS is the command we use to create and run our app. It's a very practical command.
4. App Building Process
When we build our app, it takes quite some time, about five minutes each time. Let's take a look at what happens during this process.
It launches a simulator. It builds and installs our app, and we're ready to go. The problem is that this command takes quite some time, about five minutes each time. But what's taking so long? Let's take a look at what happens when we build our app, shall we? We'll be finding here the same elements as in the first schemas, but in a more chronological view. Also, I'm talking a lot about iOS right now. But Android's pretty much the same. And for this part, keep in mind that I'm talking about the legacy architecture, not the new one, but the conclusions will remain the same. Let's get started.
5. React Native Run iOS Command
On another hand, we are going to open our simulators and launch it. And we are going to take care of our native code. As we said earlier, the native code has to be compiled. And this compilation process is going to produce an application, an executable, an IPA that we are going to install on our simulator. Once it is installed, we are going to launch it.
6. Development Gestures and App Startup
Now another kind of change, a trickier one that you may do in the code is a native change. This new native code you added has to be compiled and included in our app. It corresponds to this step in our tree. What we need to realize here is that this compilation process will produce a whole new app and install it on our phone. It will completely override the previous application we had installed. So to see our new native change, we have to rebuild our app, either by running React Native run iOS or by building it with Xcode.
Now the main gesture that I wanted to check with you today is this one, how you start your app on a daily basis. Because like I said, I used to run React native run iOS every day to launch my app, but it really wasn't necessary. You see, when you run this command, you go through all of those steps, including the native code compilation, which really takes the biggest amount of time here. But unless you added a new native library during the night, you don't need to do this. Your app is already installed somewhere on a simulator in your computer. What you need to start your app is really three things. A Mitra server, the device you used the day before, and the application installed on that device.
7. Starting and Testing Your App
So the process I would recommend to start your app is this one. First, you run, you start a Mitra server by running react native start. Then you launch your simulator. You can do it in command line or using spotlight by selecting your simulator application. And then you have to click on your app on your simulator to launch it. And that's it. It saves so much time already.
One small disclaimer, though. Even though I strongly advise you not to run React Native on iOS every day to launch your app, I still advise you to run it from time to time. You see, if you're working on a project where you don't hide libraries every so often anymore, the risk is that the one day you need to build your app, it doesn't work anymore. And you don't want to spend three hours debugging this process when you have a new version to deliver to the stores.
Let's move on to the last gesture, testing your app on a different simulator. That's something that I have to do every day. I usually work on a specific simulator, but I have to test my code in different situations, with a smaller screen or without a notch, for example. Until I learned about all of this, I used to run React Native Run iOS every day to do it. But it isn't necessary. You may start to see why now. You don't need to compile your native code again. Your native code is not specific to a particular iPhone. All you need to do is to take the executable you already built and install it on another simulator. On Android, you can do this by running ADP install. On iOS, you can do this in Xcode by selecting Run Without Building.
8. Handling Red Screen of Death Error
But what's instant? Think about this. This library may also have a native part. In this case, you have to install it as well by running part install and to compile it. So, you have to rebuild your app by running reg native run iOS.
So I hope that the next time you encounter the red screen of death, you'll understand what's going on behind the hood. And you'll know how to handle it. That's it for me. Thank you so much for listening. It was my first talk and I was really glad to give it. Also, please don't kill your simulator.