Reload the Simulator when Changes Occur in React Native Apps
Once your React Native app is up and running, we’ll make a simple change and reload the simulator to show the change. We’ll look at manually reloading the simulator, reloading with Live Reload and reloading with Hot Reloading, and talk about the pros and cons of each method.
Instructor: [00:00] Open index.js, which is the entry point for the React Native app. The app registry is used to load a React component onto the screen. The component that is being loaded is app. Let's open app.js. Now you can see the component that is being shown on the simulator.
[00:20] Let's clean this up a bit and remove the parts of the default component that we aren't using. We can change the welcome text to "restaurant review." To see the change in the simulator, we don't need to rebuild the entire app. Instead, for iOS, select the simulator and press command-R on a Mac or control-R on Windows, which will rebuild just the JavaScript portion of the app. We can see that change.
[00:47] Another way to refresh the app is to open the developer menu with command-D on a Mac or control-D on Windows and select reload. On Android, you can double-tap R to reload or bring up the developer menu with command-M on a Mac or control-M on Windows and select reload.
[01:07] There's another way to reload and see changes on both iOS and Android as well. Open the developer menu and enable live reload. In this mode, a watcher will watch the files in your project. Saving any JS file will trigger the simulator to reload the app.
[01:26] We can take this one step further as well. First, turn off live reload, and then enable hot reloading. In hot reloading mode, the app won't rebuild and reload the entire JavaScript bundle. Instead, it will just update the parts of the app that you changed.
[01:45] It will reload the components without a full refresh. When we make changes now, you can see that it's hot reloading without refreshing the entire bundle. Hot reloading can save a lot of time when you're developing, but sometimes it doesn't work very well. Then you have to go back to a full refresh. For that reason, we'll switch off hot reloading for this app.
Thanks for the feedback Piyush - I see what you mean; at least a box or arrow to what is being deleted would help. I'll keep that in mind when I update the course - thanks!
Thanks for looking into it, Chris.
One more thing .. stating you may click on Command .. on Mac and Control ... on Windows is a well known thing now, and it just adds fluff to the learning narration. I wish online instructors skipped this and just spoke about one of the two systems. I prefer Ctrl, since it covers Windows and Linux.
The deletions and changes are made sooooo fast that after repeated watching the recording, I'm not able to see what changed. If he highlghted the portion to delete and let the student take that in, it would be much better student experience. Thank you.