react-native-maps doesn't seem to be working in my application

24 views Asked by At

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.

0

There are 0 answers