fix: centre map on user location at startup

Request foreground location permission on RecordingScreen mount so the
map can find the user immediately. Camera now always has trackUserLocation
set — 'default' when idle/paused (follows position, no rotation) and
'course' when recording (follows direction of travel).
This commit is contained in:
Davide Scaini
2026-06-03 10:06:24 +02:00
parent efc7af4a4a
commit ec6a6facd1
2 changed files with 11 additions and 2 deletions
+6 -2
View File
@@ -6,7 +6,7 @@ import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
import { Map, Camera, GeoJSONSource, Layer, UserLocation } from '@maplibre/maplibre-react-native';
import type { LineLayerStyle } from '@maplibre/maplibre-react-native';
import { useRecordingStore } from '../store/recording';
import { startGpsRecording, stopGpsRecording, requestLocationPermissions } from '../services/gps';
import { startGpsRecording, stopGpsRecording, requestLocationPermissions, requestForegroundLocation } from '../services/gps';
import { RootStackParamList } from '../types';
import { colors } from '../theme';
import { useTheme } from '../ThemeContext';
@@ -27,6 +27,10 @@ export function RecordingScreen() {
return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
}, []);
useEffect(() => {
requestForegroundLocation();
}, []);
useEffect(() => {
if (keepAwake && status === 'recording') activateKeepAwakeAsync();
else deactivateKeepAwake();
@@ -94,7 +98,7 @@ export function RecordingScreen() {
<View style={styles.mapArea}>
<Map mapStyle={MAP_STYLE} style={StyleSheet.absoluteFill} logo={false} attribution={false}>
<Camera
trackUserLocation={status === 'recording' ? 'course' : undefined}
trackUserLocation={status === 'recording' ? 'course' : 'default'}
initialViewState={{ zoom: 14 }}
/>
<UserLocation />
+5
View File
@@ -55,6 +55,11 @@ async function maybeNotifyKm(distanceMeters: number): Promise<void> {
});
}
export async function requestForegroundLocation(): Promise<boolean> {
const { status } = await Location.requestForegroundPermissionsAsync();
return status === 'granted';
}
export async function requestLocationPermissions(): Promise<boolean> {
const { status: fg } = await Location.requestForegroundPermissionsAsync();
if (fg !== 'granted') return false;