React Native Template does not Reload or Fast Refresh properly

[jdeff]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?

I recently created a new React Native project using the following command: npx react-native init MyProject. This created scaffolding for React Native 0.70.3 and metro 0.72.3. I noticed that after editing the App.js file two times, both the Fast Refresh feature and manually "reloading" the application did not work. I had to kill the metro server and restart it to get the changes to apply.

I created another React Native project specifying the previous version: npx react-native init MyProject_69 --version 0.69.6
and was not able to reproduce this issue: React Native 0.69.6 and metro 0.70.1. Something seems to have broken between 0.70.1 and 0.72.3. I also grabbed the latest snapshot of React Native (at the time was 0.0.0-20221021-2022-9e68eea2c), which points to metro 0.72.3, and verified the issue is still present.

I was able to reproduce this issue just using the plain template with no additional code changes or customizations.

I am fairly confident that the issue is with Metro as I was able to inspect the source payload from Metro after a reload and confirm that the expected code changes were not present in the javascript. In my tests I was using the iPhone 13 simulator running iOS 15.5.

What is the expected behavior?

I expect the behavior of 0.72.3 to be the same as 0.70.1, where any time I make changes to App.js, they are reflected.

I am on an M1 MacBook Pro.

macOS: 12.3
Xcode: 13.4.1
node: v16.15.1
yarn: 1.22.19

[brsaylor2]

This sounds a lot like this issue: facebook/react-native#32001

[sajinmp]

@jdeff I faced this issue yesterday. Just found out that it was because of the swap file that gets created on edit. Rather than restarting metro, could you try saving and closing the file to see.

I think it has to do with watchman and how the code changes are recorded in the temporary file. Even if the file is saved, the temp file exists till the file is closed. It only worked for me when I saved and quit together. I think watchman is expecting the temp file to overwrite the file rather than syncing with it.

Just opening the file without creating a swap file fixed the issue for me. Not sure if it would help.

This was my first try of react native :D. It seems that rather than code and stuff, I fell right into the depths, lol. Hard to top this experience though, spending around 9-10 hrs just to write Hello World 😅 😌 🥱

[brsaylor2]

:set noswapfile in Vim seems to fix it for me - thank you @sajinmp!