Inicio > Cursos > React Native > GPS y Ubicación
React NativeAPIs Nativas y ExpoLección 10 de 14

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>
  );
}
Consejo🔋 watchPositionAsync consume batería. Para apps en producción, usa el menor accuracy necesario y detén el seguimiento cuando no se necesite.
← Cámara y Galería con ExpoNotificaciones Push →

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