Description
Do you want to request a feature or report a bug?
bug
What is the current behavior?
Newly-created React Native app doesn't reflect every code change during development when using Metro. The behavior is intermittent. Some code changes will be reflected in the app, then some won't be after saving the file. None of the following work to "force" an update:
- Saving the file repeatedly.
- Hitting the "r" key to force reload in the Metro terminal window
- Hitting the "r" key on the emulator to get it to reload.
- Running with
--reset-cache.
It looks minor, but it's really disruptive to development, since when I'm debugging, I can't tell which version of the app is currently being displayed. The only "workaround" I have is to add unique console.log() statements until one of them appears in the terminal that matches what I last wrote.
Usually the first code change is reflected after starting Metro. After that it's totally it or miss. I might get two or three successful updates in a row, and then none for a while.
If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.
- Create a new React Native+metro application by running
npx react-native@latest init react_native_update_test - Run in Android with
npx react-native run-android. (Although I see the same behavior with iOS.) - Open App.tsx in editor, and make a change (e.g. to some text.) Save the file.
- Make more changes, line by line. Change the styles. Try changing the same padding value multiple times - saving each time.
In the attached video, you can see:
- At 0:07 the text I added wasn't reflected after saving the file.
- Then at 0:25, I added another sentence, then both the previous sentence and that one appeared.
- At 0:43, the text "Another change" was not reflected after saving.
- Then at 1:04 I again added another sentence, saved, and now it updated.
- At 1:31, the first style change is reflected upon saving.
- After that, none of the other style changes are shown.
react_native_not_updating.mov
What is the expected behavior?
I presume that the app should update on every code change.
Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.
Node v18.19.0
watchman 2023.12.04.00
Mac OS 14.2.1 (23C71)
metro@0.80.5
The metro config is the standard one for a new React Native app:
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
/**
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);