React Native Hot Reload doesn't update the screen on changes?

Question

I've recently started working in React Native. I was intrigued by the Hot and Live reload features. However, hot reload isn't working for exactly how it should (instant change). I understand the difference between Hot Reload and Live Reload.

The problem is, whenever I make a change in my file, say profile.js, there's a tooltip saying Hot Reloading.., but the changes I made are not reflected. Now to be clear, I am just changing the font size of a TextView, which is inside the render function. However, if I go to another activity and then come back to profile.js, it reflects the changes.

Is there something I am doing wrong, or is it a bug in the Hot Reload feature?

Any links to other places where I could find answers are totally welcome.

MD Aslam Ansari · Accepted Answer · 2018-03-29 10:58:12Z

4

Hot reload will not work for all the cases. When there is a change which needs the whole bundle to rebuild, in that case it wont work. Small changes like text change, or any other trivial changes which doesn't require to build whole project should work just fine. For validating if its working or not.

Create a new project.
Enable hot reload but disable the live reload.
Change any text from the App.js file

Observe if there is any change in the screen or not. If it doesn't try upgrading the react native cli or reinstall.

edited Mar 29, 2018 at 10:58

answered Mar 29, 2018 at 10:37

MD Aslam Ansari

1,56511 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ajay Gupta Over a year ago

"When there is a change which need the whole bundle to rebuild, in that case it work." --- this "is" a typing mistake right?

Ajay Gupta Over a year ago

it didn't work. Tried all of the steps you mentioned.

MD Aslam Ansari Over a year ago

Are you using React native or CRNA ?

Ajay Gupta Over a year ago

Im using React native

Doan Bui · Accepted Answer · 2020-09-17 10:34:31Z

2

It consumes me up to 2 working days. My app suddenly can't be hot reloaded.

I finally found the solution, the problem is with your watchman. So reinstall it:

rm -rf /usr/local/var/run/watchman && brew uninstall watchman && brew install watchman

answered Sep 17, 2020 at 10:34

Doan Bui

4,53634 silver badges40 bronze badges

Comments

Ale · Accepted Answer · 2024-05-15 09:12:38Z

0

I had similar problem, hot reloading wasn't working for home screen. At some point I've checked if it was working on other screens and it was fine there. After some tries of narrowing down the problem to particular thing I figured out that the HMR wasn't work because of if statement logic. My home screen was checking if user is logged in and depending on this it would load one or another component. I just made my component, on which I was working, as single screen rendered out of the current home screen and HMR worked perfect. Once I was done with it I've moved it back to home screen. This is not solution for every case, but in mine - it worked.

answered May 15, 2024 at 9:12

Ale

1,0523 gold badges15 silver badges36 bronze badges

Collectives™ on Stack Overflow

React Native Hot Reload doesn't update the screen on changes?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related