Provider Confetti con animación en React Native

Aprende a conectar un provider con Explorer, usar context y añadir animación con confetti para celebrar hábitos completados hoy. Con un servicio simulado vía fetch, verás cómo mostrar mensajes aleatorios de motivación sin salir de tu app. Confianza, claridad y resultados rápidos.

¿Cómo conectar el provider con Explorer y usar el context?

Conectar la lógica de hábitos al context simplifica el flujo y hace que los cambios se reflejen en Home de inmediato. La clave: importar desde useHabit y usar add habit con título y prioridad.

• Importar add habit desde use habit y pasarlo título y prioridad.
• Mantener el pick existente: solo se agrega la llamada a add habit.
• Al seleccionar un hábito sugerido en Explorer, se agrega automáticamente a los hábitos personales en Home.

¿Qué cambia en add habit con use habit?

• Dejar de usar add habit del Explorer y usar el del context.
• El comportamiento es idéntico para el usuario, pero la fuente de verdad es única.

¿Cómo integrar toggle habit y last done at para hoy?

• Crear una función que detecte si el hábito se completó hoy con last done at.
• Si se completa hoy: actualizar last done at con la fecha actual y disparar la animación.
• Si no corresponde: marcar false y continuar el flujo normal.

¿Cómo tipar el render item y evitar any?

• En la lista, usar el tipo Habit en list render item en lugar de any.
• Pasar la propiedad “se hizo el día de hoy” y llamar la nueva función de confetti.

¿Cómo añadir animación con React Native Confetti y un provider?

Se instala la librería y se crea un nuevo provider para controlar cuándo y cómo mostrar la animación. El provider es el centro de control del confetti: visibilidad, mensajes, duración, inicio y fin.

• Instalar la librería de React Native Confetti en Kanu.
• Crear un provider de confetti con estados: visible, mensaje, duración y banderas de inicio/fin.
• Renderizar dos confettis (izquierda y derecha) para cubrir la pantalla del hábito.
• Añadir estilos mínimos para una visualización clara.

¿Cómo envolver la app con el provider de Celebrate?

• Importar y envolver el stack principal: usar el provider como etiqueta padre de las tabs.
• En index, usar la funcionalidad expuesta por el provider para lanzar confetti al completar hoy.
• Integrar con la lógica de toggle habit para no sobreescribir animaciones.

¿Cómo activar la animación al completar un hábito?

• Al seleccionar un hábito completado hoy: mostrar confetti y un mensaje aleatorio.
• La interfaz muestra “Se completó el día de hoy” y un mensaje variable del servicio.
• Si no ves cambios, presiona R en la terminal para recargar.

¿Cómo crear un servicio con fetch, endpoint y mensajes de motivación?

Se simula una llamada externa con un servicio local. Objetivo: traer un mensaje aleatorio para la animación, como si viniera de una API.

• Crear la carpeta de servicios y el archivo motivation.
• Simular una API con un mock local: varios mensajes de motivación.
• Definir un endpoint: si existiera URL real, guardarla en process environment del proyecto.

¿Cómo estructurar try catch y validar response ok?

• Hacer fetch al endpoint con método post y un body: nombre y título del hábito.
• Verificar response ok: si no, lanzar throw error con “endpoint falló”.
• Convertir la respuesta a Json y obtener data.
• Extraer data message, convertir a toString y retornarlo.

¿Qué pasa si no hay endpoint o falla la llamada?

• Usar un slide para mostrar parte de la información con mínimo y máximo.
• Fallback: retornar un mensaje del mock local en la posición 0.
• Consolear el error para depuración.

¿Qué habilidades y conceptos prácticas aquí?

• Context y provider: centralizar estado y exponer acciones.
• use state: controlar visibilidad y flujo de animación.
• fetch y post: simular llamadas a una API con body.
• try catch y manejo de errores: robustez ante fallos.
• response ok y res Json: validación de respuestas y parsing.
• last done at: lógica para “completado hoy”.
• Tipado correcto en listas: evitar any y usar Habit.

¿Te gustaría añadir más mensajes de motivación o mejorar la lógica de “hoy”? Cuéntame en los comentarios y probamos juntos.