Map shows correctly and so does location in EMULATOR. Built app crashes on MapView

[cratag]

Expo CLI 3.28.2 environment info:
System:
OS: Windows 10 10.0.19041
Binaries:
Node: 15.2.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - C:\Users\Fresqui\AppData\Roaming\npm\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ^39.0.4 => 39.0.5
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
Expo Workflow: managed

My map works perfectly on the emulator, showing the actual location and map working.
As soon as the map should show in the apk, it crashes and restarts the app.

I’ve configured a separate screen to isolate the issue. I’ve added a text that says “Longitude” and “Latitude”, and it shows the numbers, ergo location is working.

In this screen I’ve made to test the issue, as soon as I click the open map button the app reloads. If I click the map button, a map renders but doesn’t go to the location position.
2
2720×1280 47 KB

Does anybody know anything about this? I’m sure I’ve already configured the API key correctly but maybe I missed something?

import React, { useState, useEffect } from ‘react’;
import {Text, View, TouchableOpacity, Modal} from ‘react-native’;
import * as Location from ‘expo-location’;
import MapView, { PROVIDER_GOOGLE } from ‘react-native-maps’;
import { Marker } from ‘react-native-maps’;
import Geojson from ‘react-native-geojson’;
//
export default function App() {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
const [elMapa, setelMapa] = useState(null);
useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== ‘granted’) {
setErrorMsg(‘Permission to access location was denied’);
}
//
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();}, );
//
var lat = null;
var long = null;
let text = ‘Waiting…’;
//
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
lat = location.coords.latitude
long = location.coords.longitude
}
//
return (

<TouchableOpacity style={{alignSelf: “center”, margin: “20%”}} onPress={() => {setelMapa(true)}}>
Mapa6

{location == null &&
No hay ubicación
}
{location != null &&
Latidude: {lat}
Longitude: {long}
}
//
<Modal visible={elMapa}
animationType=“fade”
transparent={true}
onRequestClose={() => {setelMapa(false)}}>

{location != null && <MapView
style={{height: “70%”, width: “100%” }}
provider={PROVIDER_GOOGLE}
showsUserLocation
//customMapStyle={mapStyle}
initialRegion={{
latitude: -34.603,
longitude: -58.3952,
latitudeDelta: 0.0222,
longitudeDelta: 0.0121}}>
<Marker coordinate={{latitude: lat,longitude: long,latitudeDelta: 0.0222,longitudeDelta: 0.0121}}image={require(’…/assets/home.png’)}/>
}
{/* {text} */}



);}

app.json

{
“expo”: {
“name”: “Multicobertura”,
“slug”: “Multicobertura”,
“version”: “1.0.0”,
“orientation”: “portrait”,
“icon”: “./assets/favicon.png”,
“splash”: {
“image”: “./assets/splash.png”,
“backgroundColor”: “#C20F2F”
},
“updates”: {
“fallbackToCacheTimeout”: 0
},
“assetBundlePatterns”: [
“**/*”
],
“ios”: {
“supportsTablet”: true
},
“web”: {
“favicon”: “./assets/favicon.png”
},
“android”: {
“package”: “com.cratag.Multicobertura”,
“config”: {
“googleMaps”: {
“apiKey”: “Key I’ve got from google”
}
}
}
}
}

I've made a post in the expo forums but they couldn't help me.

Please tell me if there's anything else I can update for you. Thanks in advance

[AdamJNavarro]

Hey @cratag, is the crash occurring when you run the apk in the emulator as well or on a physical device?

[cratag]

Hey @cratag, is the crash occurring when you run the apk in the emulator as well or on a physical device?

Hey Adam, I didn't check the apk in the emulator. I'll check it out right now

[cratag]

I created a test screen to show location via text and then if location exists, I click the button and the map opens.
I can't get the location to work in Android Studio or BlueStacks. If I click the Map button, nothing happens

Location works in my phone, but map doesn't.

[DavraYoung]

@cratag Try to check whether your apiKey has enabled Maps SDK for Android in Google Console.
Here is my enabled Maps SDK for Android in Google Console:

If it is not the problem, then upload the logs from built apk. Most probably the error message is in logs, you just need to read it)

[cratag]

I'm trying to find that specific thing. I'm in google console but I can't find that

I appear to have some issue with the client ID as well.

[cratag]

Here it is, and it seems to be working.

How do I upload logs from built app?

[cratag]

Well I've managed to create the logcat. I've seen an error that said invalid key so I made a new key and now I don't see the error in the logcat, but the app crashes nevertheless once the map is shown.

Logcat is too long so here's a link for the full LOGCAT.TXT FILE

and here's an extract of the logcat from the first time "MULTICOBERTURA" (my app) is shown, which I found relevant:

12-22 02:24:27.561 7692 7692 E AndroidRuntime: FATAL EXCEPTION: main 12-22 02:24:27.561 7692 7692 E AndroidRuntime: Process: com.cratag.Multicobertura, PID: 7692 12-22 02:24:27.561 7692 7692 E AndroidRuntime: java.lang.RuntimeException: Unable to resume activity {com.cratag.Multicobertura/host.exp.exponent.MainActivity}: java.lang.RuntimeException: Expo encountered a fatal error: Attempt to invoke virtual method 'host.exp.exponent.j host.exp.exponent.j.c(java.lang.String, java.lang.Object[])' on a null object reference

[cratag]

Please, if anyone knows what I'm doing wrong, that would be really helpful.
Thanks!

[cratag]

Hey @cratag, is the crash occurring when you run the apk in the emulator as well or on a physical device?

I think I've added more info, shouldn't the tags be removed?

[cratag]

Happy new year to everyone. Anyone knows?

[cratag]

What kind of additional info does this need? I really need help, I don't know if I'm not showing the necessary info or if it is that no one knows the answer :(

[brentvatne]

@cratag - you have probably not configured it as explained on https://docs.expo.io/versions/latest/sdk/map-view/#configuration

[cratag]

@cratag - you have probably not configured it as explained on https://docs.expo.io/versions/latest/sdk/map-view/#configuration

Thank you. I've just did all of the steps again with a new account, project and organization. I no longer have the "An error occurred retrieving ClientID" error in the google API credentials so there's hope.

APK is building right now. Will give further notices

Thank you all

[cratag]

@cratag - you have probably not configured it as explained on https://docs.expo.io/versions/latest/sdk/map-view/#configuration

Thank you. I've just did all of the steps again with a new account, project and organization. I no longer have the "An error occurred retrieving ClientID" error in the google API credentials so there's hope.

APK is building right now. Will give further notices

Thank you all

It doesn't work. Same error as before. I don't think it's related to API key.
I think expo is just incompatible with the google maps API

[carlosag012]

I have the same issue, it works in the managed workflow when published to expo, but when deployed to Google store app, it crashes as soon as I tap the map screen.

[cratag]

I have the same issue, it works in the managed workflow when published to expo, but when deployed to Google store app, it crashes as soon as I tap the map screen.

Hey, I've fixed it, so I'll give you a heads up: if the app crashes, then it's not about the API KEY from Google. If the key does not work, then the map renders GREY without content, but won't crash.

So lets do this step by step:

1. expo init a new app,
2. expo install react-native-maps in it
3. Edit app.js with the expo mapview example code
4. expo build:android -t apk
5. Do the deploy to standalone thing (without Google Sign in configured)
   5.1(optional). I would check if everything is working in the emulator/android expo app, but that's not needed
6. After it's done, expo build:android -t apk again

[carlosag012]

1. expo init a new app,
2. expo install react-native-maps in it
3. Edit app.js with the expo mapview example code
4. expo build:android -t apk
5. Do the deploy to standalone thing (without Google Sign in configured)
   5.1(optional). I would check if everything is working in the emulator/android expo app, but that's not needed
6. After it's done, expo build:android -t apk again

Hey! Thanks a lot for the reply. I went step by step and I actually installed the APK file in my phone, tested it that way and it worked fine at first. Then, uploaded it to the Play Store and got the map to show grey. I tried with the SHA-1 cert from the Play Store and then it showed up.

Thanks again for the reply and the help. Hopefully other people having the same issue see it here. :)