I am developing a React Native application using Expo Client, I am also using the android emulator from android studio to connect to see all my changes live.
However the fast refresh doesn't work, I can only see changes if I restart the development server which makes the workflow extremely long and tedious.
I have tried many fixes that are listed in these posts here Link1 and here Link2.
To summarise the fixes I have tried but did not solve my issues:
- deleted package-lock.json and reinstall (using npm install --package-lock-only)
- Deleting Expo app off the emulator, wiping emulator data and cold booting it then re installing Expo app
- Clearing browser cache and turning on and off remote debugging js (this method is covered in the the first link)
None of these have worked for me.
I'm including the package.json file just this might be needed.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-munity/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/material-bottom-tabs": "^5.3.14",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-av": "~8.7.0",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"native-base": "^2.15.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": ".0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}
I am developing a React Native application using Expo Client, I am also using the android emulator from android studio to connect to see all my changes live.
However the fast refresh doesn't work, I can only see changes if I restart the development server which makes the workflow extremely long and tedious.
I have tried many fixes that are listed in these posts here Link1 and here Link2.
To summarise the fixes I have tried but did not solve my issues:
- deleted package-lock.json and reinstall (using npm install --package-lock-only)
- Deleting Expo app off the emulator, wiping emulator data and cold booting it then re installing Expo app
- Clearing browser cache and turning on and off remote debugging js (this method is covered in the the first link)
None of these have worked for me.
I'm including the package.json file just this might be needed.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-munity/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/material-bottom-tabs": "^5.3.14",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-av": "~8.7.0",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"native-base": "^2.15.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github./expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}
Share
Improve this question
asked Mar 11, 2021 at 16:16
MicStMicSt
1976 silver badges27 bronze badges
3
- Same issue.. I did nothing. What worked 2 days ago is not working now. – hkacan Commented Mar 12, 2021 at 7:46
- Have you found any work arounds that work even temporarily? – MicSt Commented Mar 12, 2021 at 14:03
- Unfortunately I could not find it. In my case, fast refresh works with expo sdk40. But it still doesn't work on sdk38. I can't find anything about why... – hkacan Commented Mar 14, 2021 at 12:17
4 Answers
Reset to default 11I solved my own problem as follows;
In project directory just run
rm -f ./.git/index.lock
I hope your problem is solved in this way.
These days you need to make sure you have the @expo/metro-runtime
(npm install @expo/metro-runtime
) package and import it into your main entry point file (ie: App.js/index.js)
import "@expo/metro-runtime"
If you made any updates to your metro packages try running
npm install --save-dev metro metro-core
I hope thismay also solve the issue for others.
Fast refresh is available in the dev tools menu on the emulator. You are supposed to be able to open it by clicking ctrl/cmd + m while the emulator is in focus but this didn't work for me (nothing happened when doing this).
But going to the terminal on VS Code and hitting shift + m opened a Dev Tools menu
? Dev tools (native only) › - Use arrow-keys. Return to submit.
> Inspect elements
Toggle performance monitor
Toggle developer menu
Reload app
Open React devtools
Use arrow keys to get to "Toggle developer menu", press enter and dev tools opens on the emulator. Then choose "Enable Fast Refresh" and hot reload will be back on: