I am using react-native-maps, and I have obtained an API key. Additionally, I have added the SHA-1 Certificate Fingerprint of my application to the credentials in Google Cloud Console. Everything seems fine, especially when working with expo-go on the emulator. However, after uploading my application to the Play Store and someone downloads it, an empty page is displayed instead of the map. How can I fix this problem? Here is my code :
<View style={styles.container}>
...
<View
style={{
position: "absolute",
top: 0,
bottom: 0,
left: 0,
height: heightPercentageToDP(100),
zIndex: 5,
elevation: 5,
}}>
<MapView
initialRegion={region}
provider={
Platform.OS === "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT
}
onPanDrag={onPanDrag}
style={styles.map}
scrollDuringRotateOrZoomEnabled={true}>
{selectedMenu.map((plant, index) => (
<Marker
draggable={false}
key={index}
coordinate={{
latitude: plant.latitude,
longitude: plant.longitude,
}}
title={plant.name}
description={""}>
<Image source={plant.img} style={styles.marker} />
</Marker>
))}
</MapView>
</View>
...
Here is the styles :
container: { //main View component style
flex: 1,
},
map: { //mapview style
flex: 1,
height: heightPercentageToDP(100), //from "react-native-responsive-screen"
width: widthPercentageToDP(100),
},
Thanks for helping.