React Native Map crash app when getting location - react-native

Question

My project displays a react native map and asks for user location.
In development the application runs nickel without error or bug or slowdown while when I build the app and install it when the application crashes.
Demo1 : DEMO gif app in developpement npx expo start: works fine
Demo2 : DEMO gif app builded installed with apk: crash
I use :
"react-native": "0.70.5",
"expo": "~47.0.12"
"expo-location": "~15.0.1",
"#react-native-community/geolocation": "^3.0.4",
"react-native-maps": "^1.3.2",
My file that contains my map :
import React, { useEffect, useRef, useState } from "react";
import {
...
} from "react-native";
import { StatusBar } from "expo-status-bar";
import * as Location from "expo-location";
import MapView, { Marker } from "react-native-maps";
import { Alert } from "react-native";
const Planisphere = () => {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
const [mapRef, setMapRef] = useState(null);
const [locationAccepted, setLocationAccepted] = useState(false);
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setErrorMsg("Permission to access location was denied");
Alert.alert(
"Location Permission Denied",
"Please go to settings and enable location permission for this app to continue.",
[
{
text: "Go to Settings",
onPress: () => Linking.openSettings(),
},
]
);
return;
}
let subscription = await Location.watchPositionAsync(
{ accuracy: Location.Accuracy.BestForNavigation },
(location) => {
setLocation(location);
setLocationAccepted(true);
}
);
return () => subscription.remove();
})();
}, []);
const handleFindMyLocation = () => {
...
};
const handleUnzoom = () => {
...
};
let text = "Waiting..";
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
return (
<View style={styles.container}>
<StatusBar style="auto" />
{location && (
<MapView
ref={(ref) => setMapRef(ref)}
style={styles.map}
minZoomLevel={8}
maxZoomLevel={18}
initialRegion={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}}
title={"Your location"}
/>
</MapView>
)}
<Text style={styles.paragraph}>{text}</Text>
{locationAccepted && (
<View>
<Button title="Find my location" onPress={handleFindMyLocation} />
<Button title="Unzoom" onPress={handleUnzoom} />
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
...
});
export default Planisphere;
My file ask location and when its authorized, the map appear.
UPDATE :
useEffect(() => {
const fetchPermission = async () => {
try {
const { status } = await Location.requestForegroundPermissionsAsync();
setPermissions(status);
if (status !== "granted") {
setErrorMsg("Permission to access location was denied");
}
} catch (err) {
setErrorMsg(err.message);
}
};
fetchPermission();
}, []);
useEffect(() => {
const fetchLocation = async () => {
if (permissions === "granted") {
const watcher = await Location.watchPositionAsync(
{ accuracy: Location.Accuracy.BestForNavigation },
(location) => {
setLocation(location);
setLocationAccepted(true);
}
);
setSubscription(watcher);
}
};
fetchLocation();
return () => {
if (subscription) {
subscription.remove();
}
};
}, [permissions]);
AndroidManifest
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.flokitoto.mapauthentificate">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<queries>
<intent>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:scheme="https"/>
</intent>
</queries>
<application android:name=".MainApplication" android:label="#string/app_name" android:icon="#mipmap/ic_launcher" android:roundIcon="#mipmap/ic_launcher_round" android:allowBackup="true" android:theme="#style/AppTheme" android:usesCleartextTraffic="true">
<meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
<meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="47.0.0"/>
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
<meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/#flokitoto/mapauthentificate"/>
<activity android:name=".MainActivity" android:label="#string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="#style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:scheme="com.flokitoto.mapauthentificate"/>
<data android:scheme="com.flokitoto.mapauthentificate"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
</application>
</manifest>
Update:
Error from logs:
FATAL EXCEPTION: expo-updates-error-recovery
java.lang.RuntimeException: API key not found. Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml
FATAL EXCEPTION: expo-updates-error-recovery
Process: com.flokitoto.mapauthentificate, PID: 14044
java.lang.RuntimeException: API key not found. Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml

Answer 1

From the error
FATAL EXCEPTION: expo-updates-error-recovery
java.lang.RuntimeException: API key not found. Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml
FATAL EXCEPTION: expo-updates-error-recovery
Process: com.flokitoto.mapauthentificate, PID: 14044
java.lang.RuntimeException: API key not found. Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml
I see that problem is in the API key for google maps
https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#specify-your-google-maps-api-key