I have been struggling with this map issue for days now still can now find the problem please I will really need help with this issues, I built my mobile app with Expo, in one of my details screen I want to display the map, when I test on android emulator screen A but on my mobile screen B it is not showing:
I have added the apiKey to my app.json
see below:
{
"expo": {
"name": "MyApp",
"slug": "myapp",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "cover",
"backgroundColor": "#fcfcfc"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"assets/images/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.myapp"
},
"android": {
"package": "com.myapp",
"versionCode": 4,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#4628a8"
},
"config":{
"googleMaps":{
"apiKey":"AIzaSyANZkUljyqBPFMaTVaaP3c4-NFxyrjxuZY"
}
}
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "rgtDhsgf-0984-8928-r674-rYtfg8565854a"
}
}
}
}
For the details screen I import react-native-maps
and include PROVIDER_GOOGLE
where the map is Details.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
const Details = ({ navigation, route }) => {
return (
<View style={styles.mapCover}>
<MapView
style={styles.mapInner}
initialRegion={{
latitude: 6.4251323,
longitude: 3.4268301,
latitudeDelta: 0.0063,
longitudeDelta: 0.0063,
}}
provider={PROVIDER_GOOGLE}
/>
</View>
)
}
export default Details
Thanks for your help