GPS y Ubicación
expo-location provee acceso al GPS del dispositivo con tres modos de uso. getCurrentPositionAsync() obtiene la ubicación una sola vez (ideal para "¿qué restaurantes hay cerca?"). watchPositionAsync() rastrea continuamente la posición con un callback que se llama cada vez que cambia (ideal para apps de navegación o seguimiento de ruta). La precisión es configurable: alta precisión usa GPS (más lento, consume más batería), baja precisión usa WiFi/celular (más rápido, menos consumo).
Las coordenadas de GPS son latitud y longitud (números decimales), que por sí solos no son muy útiles para mostrarle al usuario. El geocoding inverso convierte coordenadas en una dirección legible ("Calle 123, Ciudad"). Para mapas interactivos, la librería react-native-maps (o expo-maps en las versiones más nuevas) muestra el mapa de Google Maps o Apple Maps con marcadores, rutas y overlays usando las mismas coordenadas de expo-location.
import * as Location from "expo-location";
import { useState, useEffect } from "react";
export function UbicacionScreen() {
const [ubicacion, setUbicacion] = useState(null);
const [direccion, setDireccion] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
obtenerUbicacion();
}, []);
const obtenerUbicacion = async () => {
// Solicitar permiso
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setError("Permiso de ubicación denegado");
return;
}
// Ubicación actual
const pos = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.High,
});
setUbicacion(pos.coords);
// Geocoding inverso (coordenadas → dirección)
const dir = await Location.reverseGeocodeAsync({
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
});
if (dir[0]) {
setDireccion(`${dir[0].street}, ${dir[0].city}, ${dir[0].country}`);
}
};
// Seguimiento continuo
const iniciarSeguimiento = async () => {
await Location.watchPositionAsync(
{ accuracy: Location.Accuracy.High, timeInterval: 5000 },
(pos) => setUbicacion(pos.coords)
);
};
return (
<View style={styles.container}>
{error ? <Text>{error}</Text> : null}
{ubicacion && (
<>
<Text>Lat: {ubicacion.latitude.toFixed(6)}</Text>
<Text>Lon: {ubicacion.longitude.toFixed(6)}</Text>
<Text>Precisión: {ubicacion.accuracy}m</Text>
{direccion && <Text>📍 {direccion}</Text>}
</>
)}
<TouchableOpacity onPress={obtenerUbicacion}>
<Text>Actualizar ubicación</Text>
</TouchableOpacity>
</View>
);
}
Practica esta lección
Resuelve los ejercicios del curso de React Native en la app, gratis y con corrección automática.
Empezar a practicar