react-native-toast-lite v1.8.9

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

2. 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;

3. 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

Propiedades de las props

propiedad de los estilos personalizados