Question 34877 in React native Question posted in
The official React Native documentation can be found here.

react native maps not displayed when development apk is built , but running fine in expo go

enter image description herethis is my app.json file

      "adaptiveIcon": {
        "foregroundImage": "./assets/Icon.png",
        "backgroundColor": "#FFFFFF"
      },

      "package": "com.atomz.app",
      "config": {
        "googleMaps": {
          "apiKey": "<my api key is here>"
        }
      }

i’am trying to build development apk in expo , im using react-native-maps , i have given the , apikey ,in app.json file , and enabled google maps for android too ,
i have given the SHA-1 key also fro the development build suggested by expo

All standard Expo templates use a debug keystore with fingerprint 5E:8F:16:06:2E:A3:CD:2C:4A:0D:54:78:76:BA:A6:F3:8C:AB:F6:25, that you can enter directly in the Google Cloud Credential Manager.

it is working fine and im able to see the maps in the expo go app ,
but when i build apk and test it in my phone , im getting only google logo in the maps page
can anyone help me with this please
thank you

this is my code

<View style={styles.container}>
        <MapView
          // onPress={Keyboard.dismiss()}
          keyboardShouldPersistTaps="handled"
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={{
            latitude: lati,
            longitude: longi,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
          ref={mapRef}
        >
</MapView>
<View>

this is my style

 container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  map: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    // width: Dimensions.get("window").width,
    // height: Dimensions.get("window").height,
    position:'absolute'
  }
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    i used the SHA-1 key provided by the project expo credentials and it worked for me , thank you all


  2. 0

    This is because Google Maps API is not free.

    https://developers.google.com/maps/documentation/android-sdk/usage-and-billing#pricing-for-product

    Although, maps will work on iOS anyway, because of Apple Maps.

    All your styles are corect, this is an issue with API. Check if you have completed all the steps below: https://docs.expo.dev/versions/latest/sdk/map-view/#deploying-google-maps-to-an-android-standalone

    Login or Signup to reply.
  3. 0

    If you’re encountering issues in Production only, but not development, and are unable to pinpoint the error (because you can’t see logs), I suggest using Sentry.io to capture and log production errors.

    Expo has official docs to integrate it into your project.
    https://docs.expo.dev/guides/using-sentry/

    Alone, you get crash reporting logged but in your situation, if perhaps your app isn’t actually ‘crashing’, you can use Sentry’s CaptureConsole integration to also capture logs to help troubleshoot.
    https://stackoverflow.com/a/73047272/4886040

    Give these a go and you should be able to pinpoint exactly why it isn’t working.

    Login or Signup to reply.
  4. 0

    I had this working for Android but not iOS, and I discovered I had made a mistake in my config. For Android the config is

     "android": {
   "config": {
      "googleMaps": {
        "apiKey": "<my api key is here>"
      }
    }
  }

    but for iOS its a little different

     "ios": {
   "config": {
      "googleMapsApiKey": "<my api key is here>"
    }
  }

    Its does state this in the docs, but the difference can easily be missed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search