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

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.

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”
}
}
}
}
}

anyone?

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.