"Cannot connect to the Metro server" on a React-Native / Expo project

Viewed 4624

I am currently trying to build a small thing with the MapView component using React-Native and Expo.

While the Google Map is perfectly displaying on my phone when I scan the Expo QR Code in Expo Go, I just modified my code by a tiny tiny bit, just modifying the dimensions of the map window - this might be what causes that because the way I did it is probably wrong, although I highly doubt it.

Here is my code so far (I've only used the App.js file yet):

import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import MapView from 'react-native-maps';
 
export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window' - 10).height,
  },
});

The error that is displayed in my terminal is:

Cannot connect to the Metro server.

Try the following to fix the issue:

  • Ensure that the Metro server is running and available on the same network
  • Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
  • If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
  • If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and the port of the local dev server - e.g. 10.0.1.1:8081

URL: 10.1.5.81:19000

1 Answers

run this command in your code editor to remove the warning

adb reverse tcp:8081 tcp:8081
Related