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