react native toast

React Native Toast

Une bibliothèque de toast pour React-Native, construite sur React-Hot-Toast. Il prend en charge des fonctionnalités telles que les toasts multiples, la manipulation du clavier, le balayage pour rejeter, les toasts positionnels et les promesses JS. Il fonctionne sur iOS, Android et Web.

Github.mp4

Pourquoi?

Je sais ce que vous pourriez penser ( jeez, une autre bibliothèque de toast? ). Croyez-moi ici, c'est la dernière bibliothèque de toast dont vous aurez besoin. J'ai construit cette bibliothèque pour répondre aux besoins spécifiques de mon application et j'ai décidé de l'ouvrir la source après avoir réalisé qu'il s'agit vraiment d'une bibliothèque de toast de premier ordre. Essayez simplement.

Caractéristiques

• Multipliers, plusieurs options . Vous voulez un toast en haut, en bas, des couleurs différentes ou des types différents en même temps? J'ai compris.

• Manipulation du clavier (iOS et Android). Déplacez ces toasts à l'écart et en vue lorsque l'utilisateur ouvre le clavier

• Swipe pour rejeter

• Toasts positionnels (haut et en bas)

• Personnalisable (styles personnalisés, dimensions, durée et même créer votre propre composant à utiliser dans le toast)

• Ajoutez un soutien aux promesses <- vraiment! Appelez toast.promise(my_promise) et regardez React-Native-toast Fonctionner sa magie, mettant automatiquement le toast avec un message personnalisé sur le succès - ou un message d'erreur sur Rejection.

• Exécute sur le Web

• Prise en charge des modaux natifs

• Rappels pour onPress, onshow et onhide

Documentation

Consultez la documentation complète ici

Commencer

Installation

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

Dépendances des pairs

Installer et lier la réaction-native-réanimée, réactif-natif-safe-area-context et réactif-native-gandler

 fil Ajouter une réaction-native réanimation réactive-native-safe-area-context réacte-native-native-man-handler

Assurez-vous de suivre l'installation de chaque package

Utilisation d'expo?

 NPX Expo Installer React-Native-réanimé React-Native-Safe-Area-Context React-Native-Getture-Handler

Cool, maintenant quoi?

Enveloppez votre application avec <GestureHandlerRootView /> et <SafeAreaProvider /> et ajoutez le composant <Toasts /> à la racine de votre application.

Appelez toast("My Toast Message") chaque fois que vous êtes prêt de n'importe où dans votre application.

 Import {View, Stylesheet, Text} à partir de 'React-Native'; import {gesturehandlerrootView} de 'react-native-Getture-Handler'; import {SafeAreAprovider} à partir de 'react-native-safe-area-context'; import {toast , Toasts} à partir de '@ backpackapp-io / react-native-toast'; import {useEffect} depuis 'react'; exporter la fonction default app () {
  useEffct (() => {toast ('hello');
  }, []);

  return (<SafeAreAprovider> <gestureHandlerRootView style = {Styles.Container}> <View> {/ * Le reste de votre application * /} </ View> <Toasts /> {/ * <---- Ajouter ici * /} </ GesteHandlerRootView> </ SafeAreAprovider>
  );} const Styles = Stylesheet.Create ({{
  conteneur: {flex: 1, alignitems: 'Center', JustifyContent: 'Center',
  },});

Exemple

Toast régulier

 Toast ("Ceci est mon premier toast", {
  durée: 3000,});

Promettre des toasts

 const Sleep = nouvelle promesse ((résoudre, rejeter) => {
  setTimeout (() => {if (math.random ()> 0.5) {résolve ({nom d'utilisateur: 'nick',});} else {reject ('username est non défini');}
  }, 2500);}); toast.promise (
  dormir,
  {Chargement: 'Chargement ...', Success: (Data: Any) => 'Welcome' + Data.Username, Error: (err) => err.ToString (),
  },
  {Position: ToastPosition.bottom,
  });

Chargement de pain grillé

 const id = toast.loading ('je charge. Me rejettez-moi chaque fois que ...'); setTimeout (() => {
  toast.dismiss (id);}, 3000);

Toast de succès

 toast.success ('Success!', {
  largeur: 300});

Toast d'erreur

 Toast.Error ('wow. Cela a sucé!');