I have followed every guide but cannot get the map to show up. I see the google logo on the bottom left, but not the map. I made an api key, set it in the manifest. I have it in the app.json. I’m not sure what else to add.
My friend was able to run the same repository fine for iOS with no problems, his map worked fine, with the same versions of everything.
app.json
{
"name": "ReactNativeCore",
"displayName": "ReactNativeCore",
"expo": {
"name": "ReactNativeCore",
"slug": "ReactNativeCore",
"privacy": "unlisted",
"sdkVersion": "36.0.0",
"version": "1.0.0",
"entryPoint": "node_modules/expo/AppEntry.js",
"platforms": [
"ios",
"android",
"web"
]
},
"android": {
"config": {
"googleMaps": {
"apiKey": "myapikey"
}
}
}
}
package.json
{
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@expo/vector-icons": "^10.0.6",
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/bottom-tabs": "^5.2.5",
"@react-navigation/native": "^5.1.4",
"axios": "^0.19.2",
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "~0.61.4",
"react-native-gesture-handler": "^1.6.1",
"react-native-maps": "^0.27.1",
"react-native-paper": "^3.6.0",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0",
"react-native-unimodules": "~0.7.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.3.5",
"react-navigation-material-bottom-tabs": "^2.2.8"
},
"devDependencies": {
"@babel/core": "~7.6.0",
"babel-jest": "~24.9.0",
"jest": "~24.9.0",
"metro-react-native-babel-preset": "~0.56.0",
"react-test-renderer": "~16.9.0"
},
"jest": {
"preset": "react-native"
},
"private": true
}
MapTab
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import { styles } from '../Styles/style';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import { render } from 'react-dom';
var counter = 0;
class MapTab extends React.Component {
constructor(props) {
super(props);
this.state = {
region: null
};
}
mapStyle = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#263c3f"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6b9a76"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9ca5b3"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2835"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#f3d19c"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2f3948"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#17263c"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#515c6d"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#17263c"
}
]
}
]
clientLocationFunction = (e) => {
let { width, height } = Dimensions.get('window');
let ASPECT_RATIO = width / height;
let LATITUDE = e.nativeEvent.coordinate.latitude;
let LONGITUDE = e.nativeEvent.coordinate.longitude;
let LATITUDE_DELTA = 0.0922;
let LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
this.setState({region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}})
counter++;
}
render() {
return (
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
showsMyLocationButton={true}
showsUserLocation={true}
userLocationUpdateInterval={1000}
region={this.state.region}
onUserLocationChange={(e) => {counter == 0 ? this.clientLocationFunction(e, counter) : null}}
showsScale={true}
customMapStyle={this.mapStyle}
minZoomLevel={15}
/>
);
}
}
export default MapTab;