CODEWITHSUNDEEP
javascriptreact-nativeexpo
MicSt
MicSt

Reputation: 197

Expo Client: Fast Refresh not working (React Native)

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:

  1. deleted package-lock.json and reinstall (using npm install --package-lock-only)
  2. Deleting Expo app off the emulator, wiping emulator data and cold booting it then re installing Expo app
  3. 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-community/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.com/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
}

Upvotes: 4

Views: 5431

Answers (4)

Clario
Clario

Reputation: 342

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:

enter image description here

Upvotes: 0

simsketch
simsketch

Reputation: 3052

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"

Upvotes: 3

wavydeer
wavydeer

Reputation: 9

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.

Upvotes: 0

hkacan
hkacan

Reputation: 213

I 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.

Upvotes: 11

Related Questions