react native toast

Reaccionar tostadas nativas

Una biblioteca de tostadas para React-Native, construida en React-Hot-Toast. Admite características como múltiples tostadas, manejo de teclado, deslizamiento para descartar, tostadas posicionales y promesas JS. Se ejecuta en iOS, Android y Web.

Github.mp4

¿Por qué?

Sé lo que podrías estar pensando ( ¿Jeez, otra biblioteca de tostadas? ). Confía en mí aquí, esta es la última biblioteca Toast que necesitarás. Construí esta biblioteca para satisfacer las necesidades de mis aplicaciones específicas y decidí de código abierto después de darme cuenta de que realmente es una biblioteca de tostadas de primer nivel. Solo pruébalo.

Características

• Múltiples tostadas, múltiples opciones . ¿Quiere una tostada en la parte superior, inferior, diferentes colores o diferentes tipos al mismo tiempo? Entiendo.

• Manejo del teclado (tanto iOS como Android). Mueva esas tostadas fuera del camino y a la vista cuando el usuario abre el teclado

• Deslizar para descartar

• Tostadas posicionales (arriba e inferior)

• Personalizable (estilos personalizados, dimensiones, duración e incluso crear su propio componente para ser utilizado en la tostada)

• Agregue soporte para las promesas <- ¡De verdad! Llame toast.promise(my_promise) y mire React-Native-Toast Work su magia, actualizando automáticamente la tostada con un mensaje personalizado sobre el éxito, o un mensaje de error en rechazar.

• Se ejecuta en la web

• Soporte para modales nativos

• Devoluciones de llamada para Onpress, Onshow y Onhide

Documentación

Ver la documentación completa aquí

Empezando

Instalación

 yarn add @backpackapp-io/react-native-tost# ornpm i @backpackapp-io/react-native-tost

Dependencias de pares

Instalar y enlace react-nativo-reanimado, react-nativo-seguro-contexto-contexto y manejo de gestos-nativos-nativos

 hilo agregue react-nativo react-react-nativo-nativo-safe-área-contexto react-nativo-gesture-gesture-

Asegúrese de seguir la instalación de cada paquete

¿Usando Expo?

 NPX Expo Instale react-nativo react-react-nativo-nativo-safe-área-contexto react-nativo-gesture-gesture-gestre

Genial, ¿ahora qué?

Envuelva su aplicación con <GestureHandlerRootView /> y <SafeAreaProvider /> y agregue el componente <Toasts /> a la raíz de su aplicación.

Llame toast("My Toast Message") siempre que esté listo desde cualquier lugar de su aplicación.

 import {Ver, Stylesheet, Text} de 'React-Native'; import {GestureHandlerRootView} de 'react-native-native-gesture-man-handler'; import {safeareAprovider} de 'react-native-safe-area-context'; import {tost , Toasts} de '@backpackapp-io/react-native-tast'; import {useEffect} de 'React'; Exportar predeterminada App () {
  useEffect (() => {toast ('Hello');
  }, []);

  return (<SafeAreProvider> <GestureHandlerRootView style = {styles.container}> <iew> {/*el resto de su aplicación*/} </ver> <toasts/> {/*<----- Agregue aquí*/} </GestureHandlerRootView> </safearaProvider>
  );} const styles = stylesheet.create ({
  contenedor: {flex: 1, alignitems: 'centro', justifycontent: 'centro',
  },});

Ejemplo

Tostada regular

 Toast ("Este es mi primer tostado", {
  duración: 3000,});

Promesa de tostada

 const sleep = new Promise ((resuelve, rechazar) => {
  setTimeOut (() => {if (math.random ()> 0.5) {resolve ({username: 'nick',});} else {rechazar ('el nombre de usuario está indefinido');}
  }, 2500);}); toast.promise (
  dormir,
  {Carga: 'Carga ...', Success: (Data: Any) => 'Bienvenido' + Data.Username, Error: (err) => Err.ToString (),,
  },
  {Posición: Toastposition.bottom,
  });

Tostada de carga

 const id = toast.loading ('Estoy cargando. Deséseme cuando ...'); setTimeOut (() => {
  toast.dismiss (id);}, 3000);

Tostada de éxito

 Toast.success ('¡éxito!', {
  Ancho: 300});

Tostada de error

 Toast.error ('¡Qué apestado!');