Concepto clave

El Expo SDK es un conjunto de módulos preconstruidos que te permiten acceder a funcionalidades nativas del dispositivo sin necesidad de escribir código nativo para iOS o Android. Imagínalo como una caja de herramientas donde cada herramienta está lista para usar: la cámara, la geolocalización y las notificaciones son algunas de las más importantes.

En el desarrollo de apps móviles, necesitas interactuar con el hardware y servicios del dispositivo. Sin Expo, tendrías que configurar permisos, manejar diferencias entre plataformas y escribir código específico. Con Expo SDK, simplificas esto a unas pocas líneas de JavaScript. Por ejemplo, usar la cámara es como pedirle a un asistente que tome una foto por ti: tú das la orden y el asistente se encarga de los detalles técnicos.

Cómo funciona en la práctica

Para usar cualquier módulo del Expo SDK, primero debes instalarlo en tu proyecto. Abre tu terminal y ejecuta npx expo install [nombre-del-paquete]. Luego, importa el módulo en tu archivo JavaScript. Antes de usarlo, asegúrate de solicitar los permisos necesarios, ya que iOS y Android requieren autorización del usuario para acceder a funciones como la cámara o la ubicación.

Veamos un ejemplo paso a paso para la geolocalización: 1) Instala el paquete con npx expo install expo-location. 2) En tu componente, importa Location desde expo-location. 3) Usa Location.requestForegroundPermissionsAsync() para pedir permiso. 4) Una vez concedido, llama a Location.getCurrentPositionAsync() para obtener las coordenadas. Este flujo es similar para otros módulos: instalación, permisos y ejecución.

Código en acción

Aquí tienes un ejemplo funcional que integra cámara, geolocalización y notificaciones en una app simple. Copia y pega este código en un archivo nuevo para probarlo.

import React, { useState, useEffect } from 'react';
import { View, Text, Button, Image, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Location from 'expo-location';
import * as Notifications from 'expo-notifications';

export default function App() {
  const [image, setImage] = useState(null);
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestPermissions();
  }, []);

  const requestPermissions = async () => {
    const cameraStatus = await ImagePicker.requestCameraPermissionsAsync();
    const locationStatus = await Location.requestForegroundPermissionsAsync();
    const notificationStatus = await Notifications.requestPermissionsAsync();
    if (cameraStatus.status !== 'granted' || locationStatus.status !== 'granted') {
      Alert.alert('Permisos necesarios', 'Necesitas conceder permisos para usar todas las funciones.');
    }
  };

  const takePhoto = async () => {
    let result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 1,
    });
    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  const getLocation = async () => {
    let location = await Location.getCurrentPositionAsync({});
    setLocation(location);
  };

  const sendNotification = async () => {
    await Notifications.scheduleNotificationAsync({
      content: {
        title: 'Notificación de prueba',
        body: 'Esta es una notificación enviada desde Expo SDK.',
      },
      trigger: null, // Se envía inmediatamente
    });
  };

  return (
    
      
      {image && }
      
      {location && (
        
          Lat: {location.coords.latitude}, Lon: {location.coords.longitude}
        
      )}
      
    
  );
}

Antes de refactorizar, podrías tener código duplicado para manejar permisos. Después, centraliza la lógica en una función como requestPermissions para mejorar la mantenibilidad.

Errores comunes

Olvidar solicitar permisos: Intentar usar la cámara o geolocalización sin permisos causa errores. Siempre llama a funciones como requestCameraPermissionsAsync primero y verifica el estado.
No manejar estados de carga: Las operaciones con SDK son asíncronas. No mostrar indicadores de carga puede confundir al usuario. Usa estados para manejar esto.
Ignorar diferencias entre plataformas: Algunas funciones pueden comportarse distinto en iOS y Android. Prueba en ambos dispositivos y consulta la documentación de Expo.
Mal manejo de errores: No capturar excepciones en llamadas asíncronas puede crashear la app. Envuelve tu código en bloques try-catch.
Usar módulos obsoletos: Expo actualiza frecuentemente su SDK. Verifica que usas la versión más reciente para evitar bugs.

Checklist de dominio

Puedo instalar y configurar módulos del Expo SDK en un proyecto existente.
Sé solicitar y verificar permisos para cámara, geolocalización y notificaciones.
Puedo integrar la toma de fotos usando expo-image-picker en una app funcional.
Sé obtener y mostrar la ubicación actual del usuario con expo-location.
Puedo enviar notificaciones locales usando expo-notifications.
Entiendo cómo manejar errores comunes y diferencias entre plataformas.
Sé probar estas funcionalidades en un emulador y dispositivo físico.

Crea una app de diario con foto y ubicación

Desarrolla una app simple que permita a los usuarios crear entradas de diario con una foto y su ubicación actual. Sigue estos pasos:

Crea un nuevo proyecto Expo usando npx create-expo-app DiarioApp.
Instala los módulos necesarios: expo-image-picker, expo-location, y expo-notifications.
Diseña una pantalla con: un botón para tomar foto, un botón para obtener ubicación, un campo de texto para notas, y un botón para guardar.
Implementa la lógica para que al guardar, se muestre una notificación confirmando la acción.
Almacena cada entrada en un estado local (puedes usar un array) y muéstralas en una lista.
Prueba la app en tu dispositivo o emulador, asegurándote de conceder los permisos necesarios.

Pistas

Usa useState para manejar la lista de entradas y los datos temporales.
Para la notificación, programa una inmediata con trigger: null en scheduleNotificationAsync.
Verifica los permisos al iniciar la app con un useEffect.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Uso de Expo SDK para cámara, geolocalización y notificaciones