this is my first react native app .I run my app with expo go development build on android studio emulator ,I use map from react-native-maps
but it is only display a gray background with google icon this is the component:
<code>import React from 'react'
import { StyleSheet, View } from 'react-native'
import MapView, { PROVIDER_GOOGLE,Marker,Circle } from 'react-native-maps';
function Map() {
console.log('provider',PROVIDER_GOOGLE);
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
</MapView>
</View>
)
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export default Map;
</code>
<code>import React from 'react'
import { StyleSheet, View } from 'react-native'
import MapView, { PROVIDER_GOOGLE,Marker,Circle } from 'react-native-maps';
function Map() {
console.log('provider',PROVIDER_GOOGLE);
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
</MapView>
</View>
)
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export default Map;
</code>
import React from 'react'
import { StyleSheet, View } from 'react-native'
import MapView, { PROVIDER_GOOGLE,Marker,Circle } from 'react-native-maps';
function Map() {
console.log('provider',PROVIDER_GOOGLE);
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
</MapView>
</View>
)
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export default Map;
according react-native-maps installation
I try to add API key to manifest file (android/app/src/main/AndroidManifest.xml):
<code><application>
<!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
</application>
</code>
<code><application>
<!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
</application>
</code>
<application>
<!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
</application>
create google_maps_api.xml in android/app/src/main/res/values.:
<code><resources>
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>
</code>
<code><resources>
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>
</code>
<resources>
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>
in app.json I add android.config.googleMaps.apiKey:”my-api-key”.
i see in expo-docs that No additional setup is required when testing your project using Expo Go,so why the map is not display?