Concepto clave

El desarrollo de una app de e-commerce con React Native y Expo requiere integrar múltiples conceptos fundamentales de manera cohesiva. Piensa en esto como construir una tienda física: necesitas un catálogo de productos (gestión de datos), un carrito de compras (gestión de estado), un proceso de pago (integración con APIs externas) y una experiencia de usuario fluida (navegación y rendimiento). La clave está en cómo estos componentes interactúan entre sí para crear una experiencia completa.

En React Native, esto se traduce en componentes reutilizables, manejo de estado con Context o Redux, navegación con React Navigation, y consumo de APIs RESTful. La analogía de la tienda física ayuda a visualizar cada parte: el catálogo es tu pantalla de productos, el carrito es tu estado global, el pago es tu integración con servicios como Stripe, y la experiencia del cliente es tu interfaz de usuario optimizada.

Cómo funciona en la práctica

Vamos a desglosar el proceso paso a paso para una app de e-commerce básica. Primero, configura tu proyecto con Expo CLI: expo init ecommerce-app. Luego, instala dependencias clave como React Navigation, AsyncStorage para persistencia, y Axios para llamadas a APIs. Estructura tu proyecto en carpetas como screens, components, context, y services.

Paso 1: Crea un contexto para el carrito de compras. Esto permitirá que cualquier componente acceda y modifique el estado del carrito sin pasar props manualmente. Paso 2: Implementa la pantalla de productos, que consume datos de una API mock o real y los muestra en una FlatList. Paso 3: Añade funcionalidad para agregar productos al carrito, actualizando el contexto. Paso 4: Desarrolla la pantalla del carrito, que muestra los items y permite ajustar cantidades o eliminarlos. Paso 5: Integra un proceso de pago simulado, como un formulario que valida datos y confirma la compra.

Código en acción

Aquí tienes un ejemplo funcional de un contexto de carrito de compras:

import React, { createContext, useState, useContext } from 'react';

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (product) => {
    setCartItems((prevItems) => {
      const existingItem = prevItems.find(item => item.id === product.id);
      if (existingItem) {
        return prevItems.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prevItems, { ...product, quantity: 1 }];
    });
  };

  const removeFromCart = (productId) => {
    setCartItems(prevItems => prevItems.filter(item => item.id !== productId));
  };

  return (
    
      {children}
    
  );
};

export const useCart = () => useContext(CartContext);

Ahora, un ejemplo de cómo usar este contexto en un componente de producto:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useCart } from '../context/CartContext';

const ProductItem = ({ product }) => {
  const { addToCart } = useCart();

  return (
    
      {product.name}
      Precio: ${product.price}
       addToCart(product)} />
    
  );
};

export default ProductItem;

Errores comunes

No optimizar listas largas: Usar ScrollView en lugar de FlatList para listas de productos puede causar problemas de rendimiento. Siempre usa FlatList con keyExtractor y renderItem eficientes.
Manejo inadecuado del estado global: Pasar props en cadena (prop drilling) en lugar de usar Context o Redux hace el código difícil de mantener. Refactoriza temprano para evitar esto.
Olvidar la persistencia de datos: No guardar el estado del carrito en AsyncStorage o similar significa que se pierde al recargar la app. Implementa sincronización con useEffect.
Ignorar el manejo de errores en APIs: No incluir try-catch o estados de carga/error al consumir APIs puede llevar a crashes. Usa estados como loading y error para mejorar la UX.
Diseño no responsive: Asumir tamaños de pantalla fijos en estilos. Usa Dimensions o porcentajes para asegurar que la app se vea bien en todos los dispositivos.

Checklist de dominio

Configurar un proyecto Expo desde cero con estructura de carpetas organizada.
Implementar navegación entre al menos 3 pantallas (ej., productos, carrito, perfil) usando React Navigation.
Crear y consumir un contexto global para manejar el estado de la app (ej., carrito de compras).
Consumir una API RESTful para obtener y mostrar datos de productos, con manejo de estados de carga y error.
Implementar funcionalidades CRUD básicas en la app, como agregar/eliminar items del carrito.
Usar componentes reutilizables y estilos consistentes en toda la app.
Probar la app en un dispositivo físico o emulador para iOS y Android, verificando que funcione correctamente.

Implementar un carrito de compras persistente

En este ejercicio, mejorarás el carrito de compras de tu app de e-commerce para que los datos persistan incluso después de cerrar la app. Sigue estos pasos:

En el contexto del carrito que ya creaste, añade funciones para guardar y cargar los items del carrito desde AsyncStorage.
Usa useEffect para cargar los datos del carrito desde AsyncStorage cuando el componente se monte.
Actualiza el estado del carrito cada vez que cambie, guardando los nuevos datos en AsyncStorage.
Asegúrate de manejar posibles errores al acceder a AsyncStorage, como permisos o almacenamiento lleno.
Prueba la persistencia cerrando y reabriendo la app para verificar que los items del carrito se mantengan.

Pistas

Recuerda que AsyncStorage es asíncrono, usa async/await o .then() para manejar las promesas.
Considera serializar los datos del carrito a JSON antes de guardarlos en AsyncStorage, y deserializarlos al cargarlos.
Usa un estado inicial vacío en el contexto hasta que los datos se carguen desde AsyncStorage para evitar errores.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Quiz: Evaluación final del proyecto integrador

Quiz Interactivo