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
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. |
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago