Expo Location en React Native: permisos y CameraView

Expo Location en React Native

Expo Location es el módulo expo-location del Expo SDK para obtener la ubicación del dispositivo en apps React Native. Lo vas a usar en productos con mapas, entregas, comercios cercanos, clima, check-ins, direcciones o formularios que necesitan latitud y longitud.

El flujo profesional es corto pero estricto: instalar la versión compatible, pedir permiso en una acción visible, manejar permiso denegado, obtener coordenadas y probar en un dispositivo o emulador con ubicación configurada. Si la app falla, casi siempre el problema está en permisos, GPS desactivado, simulador sin ubicación o una configuración avanzada que requiere development build.

Qué es Expo SDK en React Native

El Expo SDK reúne APIs para cámara, ubicación, notificaciones, sensores, archivos, pantalla, autenticación y otros módulos nativos usados en apps móviles. En vez de pelear con configuración nativa desde el primer día, podés instalar el módulo correcto, importarlo y probarlo dentro de una app Expo.

Para aprender y crear portfolio, lo más importante es entender el patrón común del Expo SDK: instalar con una versión compatible, pedir permisos en el momento correcto, probar en dispositivo real y saber cuándo Expo Go alcanza o cuándo necesitás un development build.

Qué problema resuelve expo-location

expo-location es el módulo del Expo SDK para obtener ubicación del dispositivo, leer latitud y longitud, verificar permisos, acceder a la última ubicación conocida y, cuando el producto lo justifica, trabajar con ubicación en segundo plano. Para la mayoría de apps iniciales alcanza con foreground location: el usuario toca una acción visible y la app obtiene la ubicación actual.

La parte importante no es memorizar una API aislada, sino respetar el orden: instalar el paquete compatible con tu Expo SDK, solicitar permiso, manejar el caso denegado y recién después leer coordenadas. Si saltás un paso, el error suele parecer de Expo, pero en realidad es de permisos o del simulador sin ubicación configurada.

Expo SDK: módulos más usados para apps reales

Si buscás "expo sdk", no memorices todos los módulos. Elegí una app concreta, por ejemplo clima con ubicación, diario con foto o perfil con avatar, y aprendé los permisos nativos que necesita.

Instalar expo-location

Dentro de tu proyecto Expo, instalá el paquete con el instalador de Expo para recibir una versión compatible con tu SDK:

npx expo install expo-location

Luego importá el módulo en el componente o hook donde vas a usarlo:

import * as Location from "expo-location";

Pedir permisos de ubicación

En iOS y Android no podés leer ubicación sin autorización del usuario. Para una app que muestra mapas, comercios cercanos, check-in, entregas, clima o contenido local, empezá por permisos foreground:

const { status } = await Location.requestForegroundPermissionsAsync();

if (status !== "granted") {
  throw new Error("Permiso de ubicación denegado");
}

Mostrá un mensaje claro si el permiso fue rechazado. No escondas el error: explicá por qué la app necesita ubicación y dejá una alternativa manual cuando tenga sentido.

Obtener coordenadas actuales

Con permiso concedido, llamá a getCurrentPositionAsync. Para una primera versión, Location.Accuracy.Balanced suele ser suficiente porque evita gastar batería de más y responde bien para muchos casos de uso.

const current = await Location.getCurrentPositionAsync({
  accuracy: Location.Accuracy.Balanced,
});

console.log(current.coords.latitude, current.coords.longitude);

Escuchar cambios con watchPositionAsync

Si la app necesita seguir la ubicación mientras el usuario se mueve, usá Location.watchPositionAsync en lugar de llamar muchas veces a getCurrentPositionAsync. Guardá la suscripción y limpiala al desmontar la pantalla para no gastar batería ni dejar listeners activos.

const subscription = await Location.watchPositionAsync(
  {
    accuracy: Location.Accuracy.Balanced,
    distanceInterval: 25,
  },
  (location) => {
    console.log(location.coords.latitude, location.coords.longitude);
  }
);

subscription.remove();

Usá seguimiento continuo solo cuando el caso lo justifique: mapas, entregas, tracking de actividad o check-ins. Para una app de clima, comercios cercanos o formulario con dirección, una lectura puntual suele alcanzar.

Ejemplo completo con React Native y Expo

Este componente cubre instalación, permiso, loading, error y coordenadas listas para usar en una pantalla real:

import { useState } from "react";
import { Button, Text, View } from "react-native";
import * as Location from "expo-location";

export default function LocationExample() {
  const [coords, setCoords] = useState<Location.LocationObjectCoords | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function loadLocation() {
    setLoading(true);
    setError(null);

    try {
      const { status } = await Location.requestForegroundPermissionsAsync();

      if (status !== "granted") {
        setError("Necesitamos permiso de ubicación para mostrar tu posición.");
        return;
      }

      const current = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.Balanced,
      });

      setCoords(current.coords);
    } catch {
      setError("No se pudo obtener la ubicación. Verificá permisos y GPS.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <View style={{ gap: 12, padding: 24 }}>
      <Button title="Obtener ubicación" onPress={loadLocation} />

      {loading && <Text>Buscando ubicación...</Text>}
      {error && <Text>{error}</Text>}
      {coords && (
        <Text>
          Latitud: {coords.latitude} | Longitud: {coords.longitude}
        </Text>
      )}
    </View>
  );
}

Probar Expo Location en emulador o dispositivo

Si probás en un celular real, verificá que el GPS esté activado y que la app tenga permisos. Si probás en Android Emulator o iOS Simulator, configurá una ubicación simulada desde las herramientas del emulador; si no lo hacés, la app puede quedar esperando o devolver una posición poco útil.

• Expo Go: sirve para validar el flujo básico de foreground location.
• Development build: conviene si vas a combinar ubicación con módulos nativos o configuración avanzada.
• Producción: probá en iOS y Android porque los permisos y mensajes del sistema no se comportan exactamente igual.

Errores comunes con expo-location

Cuándo usar ubicación, cámara y notificaciones juntas

Esta lección pertenece al bloque de Expo SDK porque muchas apps reales combinan varios módulos nativos. Una app de entregas puede guardar ubicación; una app de inspecciones puede tomar foto; una app de reservas puede enviar recordatorios. La clave es no pedir todos los permisos al abrir la app: pedilos cuando el usuario entiende el beneficio.

Ejercicio: app de diario con foto y ubicación

Construí una pantalla que permita guardar una entrada con texto, foto y coordenadas. Primero implementá ubicación con expo-location. Después sumá cámara o selector de imagen. Por último, mostrale al usuario una confirmación al guardar.

1. Creá el proyecto con npx create-expo-app DiarioApp.
2. Instalá expo-location y validá que podés mostrar latitud/longitud.
3. Agregá un campo de texto para la nota.
4. Guardá cada entrada en estado local con fecha, nota y coordenadas.
5. Probalo en dispositivo real y en emulador con ubicación simulada.

Checklist antes de publicar

• Instalé expo-location con npx expo install.
• Pido requestForegroundPermissionsAsync antes de leer coordenadas.
• Manejo permiso denegado con un mensaje claro.
• Uso precisión razonable para no gastar batería innecesariamente.
• Limpio la suscripción si uso watchPositionAsync.
• Probé la ubicación en iOS y Android, no solo en un navegador.
• Si necesito background location, lo trato como una función avanzada con configuración propia.

Siguiente paso laboral

La habilidad que buscan muchos proyectos no es solamente "usar Expo", sino conectar permisos, estado de UI, manejo de errores y pruebas reales. Cuando termines esta práctica, subila a tu portfolio y conectala con rutas de empleos tech, cursos de React Native y perfiles de profesionales Cursalo.

Referencias oficiales: Expo Location, Expo Camera y development builds de Expo.