How to Enable Live Reload for React Native Apps

 

This video shows how to speed up your React Native development by enabling live reloading of your app.

Transcript

One of the great things about developing apps using React Native is that when you make changes to your source code in JavaScript, those changes can be seen in your app without having to recompile your app. The way you can do that is just to reload the app using command R. There’s a way that’s even quicker than pressing command R to reload your app. You can get the app to update itself automatically. This is something called live reload. I’ll show you how it works in case you haven’t seen it yet.

Now I’ve created a brand new out-of-the-box app. Currently I don’t have live reload enabled. If we make a change to the app, perhaps we want to increase the font size, we make the change to our source code and then go over to the simulator and press command R to reload the JavaScript. There we go. The text has increased in size. Let’s try enabling live reload.

To do that we press command D and then simply click on enable live reload here. Now let’s try increasing the font size again. I’m going to save this file. As I do so, watch the app on the right hand side. I’m saving it now. There you go, the font size has increased. The app reloaded automatically having seen that the JavaScript file had been updated. If you haven’t come across this before, this should make developing React Native apps even quicker and more fun.

Leave A Reply

Your email address will not be published. Required fields are marked *