React Native Expo Web not Updating

Question

I got a problem with my react native app: i start the app with npx expo start -w so it opens in the browser. It normally opens the app with the latest changes. When i make some changes and save the file in the app/screen the app will reload. But when i do more changes and save after that the console it says web compiled successfully but the app itself in the browser doesnt change at all and it stays like that even after reloading the page/app. Any suggestions whats the problem and how to fix it?

Answer 1

You might have two issues. If you're not seeing automatic updates when you save the file, it is likely because Fast Refresh isn't automatically enabled with web. I had same issue, and found that some templates from expo were allowing for Fast Refresh on web, while others didn't. It led me to see that those templates with FR had expo-router installed in node_modules, and the entry point for the application was in node_modules/expo-router/entry.js. expo-router states:

// `@expo/metro-runtime` MUST be the first import to ensure Fast Refresh works
// on web.
import '@expo/metro-runtime';

import { App } from 'expo-router/build/qualified-entry';
import { renderRootComponent } from 'expo-router/build/renderRootComponent';

// This file should only import and register the root. No components or exports
// should be added here.
renderRootComponent(App);

so if you npm install --save-dev @expo/metro-runtime (or yarn if you use that) and then import it at the very beginning of your entry point in the app (it should state where that is in the command line when you save and web gets bundled) Fast Refresh should then work. H/t to palicko on github for confirming and providing steps.

As for why you're not seeing updates after you hard refresh in the browser, that may be a different issue. Hopefully you figured it out by now!

Answer 2

The answer of @darkcard worked for me. I'm going to summarize it a bit:

Steps to Fix the Problem

1. Install @expo/metro-runtime Run this command to install the required package:

npm install --save-dev @expo/metro-runtime

2. Import @expo/metro-runtime in Your Entry Point Locate your app's entry point file (commonly index.js, index.ts, or App.js). Add the following line at the very top of the file:

import '@expo/metro-runtime';

3. Restart the Development Server

npx expo start --web -c