react-native-toast-lite

Versión: v1.8.9

Descripción

react-native-toast-lite es una biblioteca de notificaciones Toast para aplicaciones React Native. Proporciona una manera fácil y configurable de mostrar mensajes breves y no intrusivos en tu aplicación. La biblioteca incluye soporte para varios tipos de mensajes, como errores y éxitos, con una personalización sencilla para adaptarse al diseño de tu aplicación.

Características

Notificaciones de Toast: Muestra mensajes en la pantalla de manera no intrusiva.
Tipos de Toast: Soporte para varios tipos de notificaciones, como errores y éxitos.
Configuración Flexible: Personaliza los colores, tamaños y estilos de los toasts.
Fácil Integración: Instala y usa en tu proyecto con facilidad.
Contexto Global con Zustand: Utiliza Zustand para manejar el estado global de los toasts.
Animaciones con react-native-reanimated: Integra animaciones suaves para una mejor experiencia de usuario.

Instalación

Para instalar la biblioteca, ejecuta el siguiente comando:

npm install react-native-toast-lite

Ejemplo de Uso

Configurar el Toast Provider (Toaster):

Asegúrate de agregar al punto de entrada de tu aplicación el Toaster para que los toasts se rederizen allí:

import React from 'react';
import { View, Text } from 'react-native';

import { Toaster } from 'react-native-toast-lite'; // Asegúrate de importar el componente Toaster

const App = () => (

    <View style={{ flex: 1 }}>
      <Toaster /> {/* Añade el Toaster en la parte superior de tu aplicación */}
      <Text>Mi aplicación</Text>
      {/* Otros componentes */}
    </View>

);

export default App;

Mostrar un Toast:

Utiliza los métodos toast.success, toast.error, toast.info, toast.warning, y toast.loading para mostrar toasts desde cualquier parte de tu aplicación.

Estos métodos te permiten mostrar mensajes con diferentes tipos de notificaciones y configuraciones personalizables. A continuación se muestra un ejemplo:

import React from 'react';
import { Button, View } from 'react-native';
import { toast } from 'react-native-toast-lite';

const ExampleComponent = () => {
 const showSuccessToast = () => {
   toast.success('Operación completada con éxito.', {
     title: 'Éxito', // Título del toast (opcional)
     position: 'top-right', // Posición del toast (opcional)
     duration: 4000, // Duración del toast en milisegundos (opcional)
     progress: true, // Muestra el indicador de progreso (opcional)
     border: true, // Muestra un borde alrededor del toast (opcional)
     styles: {
       backgroundColor: '#28a745', // Color de fondo personalizado
       borderColor: '#155724', // Color del borde personalizado
       titleColor: '#fff', // Color del título personalizado
       textColor: '#ddd', // Color del texto personalizado
       progressColor: '#ffc107', // Color del indicador de progreso personalizado
     },
   });
 };
toast.success("¡Gracias por visitarnosss!", { toastStyle: 'dark', icon : '🚀'})

 const showErrorToast = () => {
   toast.error('Hubo un problema con la operación.', {
     title: 'Error',
     position: 'center',
     duration: 2500,
     icon: '🚫', // Icono personalizado (emoji)
     styles: {
       backgroundColor: '#dc3545', // Color de fondo personalizado
       borderColor: '#721c24', // Color del borde personalizado
       titleColor: '#fff', // Color del título personalizado
       textColor: '#f8d7da', // Color del texto personalizado
     },
   });
 };
 // Ejemplo de uso real
 import { sendData } from './sendDatAxiosApi'

 const enviarDatos = async ({ formData }) => {
   toast.loading("Cargando...", {
     id: "cargaDatos",
     duration: 2000,
     position: top, // estado persistente si cambia el loading a success
     toastStyle: "dark", // esta prop tambien se mantiene
     icon: '⏳', // Icono personalizado (emoji)
   });
   try {
     const { success, message } = await sendData(formData)
     if (success) { 
       toast.info(message ?? 'Se ha realizado correctamente..', { title: 'Exito!', id: 'cargaDatos' }); // heredara position y toastStyle
       
     } else {
       // toast ...
       toast.error(message ?? 'Error inesperado', { title: 'Error', id: 'cargaDatos', duration: 2000 })
     }
   } catch(error) {
       // toast ...
   }
 }
 
 return (
   <View>
     <Button title="Mostrar éxito" onPress={showSuccessToast} />
     <Button title="Mostrar error" onPress={showErrorToast} />
   </View>
 );
};

export default ExampleComponent;

Tipos de Toast

Tipo	Descripción
`error`	Muestra un mensaje de error.
`success`	Muestra un mensaje de éxito.
`info`	Muestra un mensaje informativo.
`warning`	Muestra un mensaje de advertencia.
`loading`	Muestra un mensaje de carga.

Propiedades de las props

Propiedad	Tipo	Descripción
`id`	`number` (opcional)	Identificador único para el toast.
`title`	`string` (opcional)	Título del toast.
`duration`	`number` (opcional)	Duración del toast en milisegundos.
`position`	`'top' - 'bottom' - 'center' - 'top-left' - 'top-right' - 'bottom-left' - 'bottom-right'` (opcional)	Posición en la pantalla donde se mostrará el toast.
`toastStyle`	`'primary' - 'secondary' - 'primaryDark' - 'dark'` (opcional)	Estilo del toast.
`animationType`	`'fade' - 'slide' - 'bounce'` (opcional)	Tipo de animación del toast.
`animationInDuration`	`number` (optional)	Duración de la animación de entrada en milisegundos.
`animationOutDuration`	`number` (optional)	Duración de la animación de salida en milisegundos.
`progress`	`boolean` (opcional)	Indica si se muestra la barra de progreso.
`icon`	`string` (opcional)	Emoji o carácter a mostrar como ícono en el toast.
`border`	`boolean` (opcional)	Indica si se muestra un borde alrededor del toast.
`inheritStyles`	`boolean` (opcional)	Indica si se heredan los styles del toast con el mismo id

propiedad de los estilos personalizados

Propiedad	Tipo	Descripción
`titleColor`	`string` (opcional)	Color del título del toast.
`textColor`	`string` (opcional)	Color del texto del toast.
`titleSize`	`number` (opcional)	Tamaño de la fuente del título del toast.
`textSize`	`number` (opcional)	Tamaño de la fuente del texto del toast.
`backgroundColor`	`string` (opcional)	Color de fondo del toast.
`borderRadius`	`number` (opcional)	Radio de las esquinas del toast.
`borderColor`	`string` (opcional)	Color del borde del toast.
`iconSize`	`number` (opcional)	Tamaño del ícono dentro del toast.
`iconStyle`	`'solid' - 'outline' - 'default'` (opcional)	Estilo del ícono en el toast.
`loadingColor`	`string` (opcional)	Color del indicador de carga si se muestra un toast de tipo loading.
`progressColor`	`string` (opcional)	Color de la barra de progreso del toast.
`width`	`number` (opcional)	Ancho personalizado del toast.
`opacity`	`number` (optional)	Indica la opacidad del fondo(0.9 por defecto).
`height`	`number` (opcional)	Altura personalizada del toast.
`top`	`number` (opcional)	Posición superior personalizada del toast en la pantalla.
`bottom`	`number` (opcional)	Posición inferior personalizada del toast en la pantalla.
`left`	`number` (opcional)	Posición izquierda personalizada del toast en la pantalla.
`right`	`number` (opcional)	Posición derecha personalizada del toast en la pantalla.