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