React Native project not opening Metro Bundler in Browser

Question

App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image

I created this project in react native, Using following commands.

expo init DoneWithIt

choses a Manage workflow with blank template

When I type "npm start" in terminal (using VS code terminal) it shows Open Image

It is not opening in browser like this Open Image

Answer 1

Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.

Answer 2

The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206

To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.

Answer 3

you will see the below error if 'w' option is grayed out or if 'w' doesn't work,

It looks like you're trying to use web support but don't have the required dependencies installed. Please install react-native-web@~0.18.9, react-dom@18.1.0, @expo/webpack-config@^0.17.2 by running: npx expo install react-native-web@~0.18.9 react-dom@18.1.0 @expo/webpack-config@^0.17.2 If you're not using web, please ensure you remove the "web" string from the platforms array in the project Expo config.

install the mentioned packages and re-start the app(npm start).

Enter w, this should work.

Answer 4

The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:

npx expo install react-native-web@~0.18.9 react-dom@18.1.0 @expo/webpack-config@^0.17.2