react native toast

Reaja torrada nativa

Uma biblioteca de torradas para reação-nativa, construída com a briga de reação-toque. Ele suporta recursos como brindes múltiplas, manuseio de teclado, deslizar para dispensar, torradas posicionais e promessas de JS. Ele é executado no iOS, Android e Web.

Github.mp4

Por que?

Eu sei o que você pode estar pensando ( caramba, outra biblioteca de torradas? ). Confie em mim aqui, esta é a última biblioteca de torradas que você precisará. Eu construí esta biblioteca para atender às necessidades específicas do meu aplicativo e decidi a fonte aberta depois de perceber que ele realmente é uma biblioteca de torradas de primeira linha. Apenas experimente.

Características

• Múltiplas torradas, várias opções . Quer um brinde na parte superior, inferior, cores diferentes ou tipos diferentes ao mesmo tempo? Entendi.

• Manuseio de teclado (iOS e Android). Mova essas torradas para fora do caminho e para a vista quando o usuário abre o teclado

• Deslizar para demitir

• To toôs posicionais (superior e inferior)

• Personalizável (estilos personalizados, dimensões, duração e até criar seu próprio componente para ser usado na torrada)

• Adicione suporte para promessas <- realmente! Chame toast.promise(my_promise) e assista a reagir a torre o trabalho de sua mágica, atualizando automaticamente a torrada com uma mensagem personalizada sobre o sucesso-ou uma mensagem de erro no rejeição.

• Corre na web

• Suporte para modais nativos

• Retornos de chamada para onpress, onsow e onehide

Documentação

Veja a documentação completa aqui

Começando

Instalação

 YARN Add @backpackapp-io/react-native# ornpm i @backpackapp-io/react-nativo

Dependências de pares

Instale e vincular reajuste reanimado, reagir-nativo-segura-contexto e manipulador de gesto-gesto de reação-nativo-gesto

 YARN Adicionar react-reanimado reagt-native-native-segue-context react-native-gesto-man-man-manus

Certifique -se de seguir a instalação de cada pacote

Usando a Expo?

 NPX Expo Instale o React-native-native-area-concurso reanimado de reação reanimada reajuste-man-man-man-gesto-gesto-manipulador

Legal, e agora?

Enrole seu aplicativo com <GestureHandlerRootView /> e <SafeAreaProvider /> e adicione o componente <Toasts /> à raiz do seu aplicativo.

Ligue toast("My Toast Message") sempre que estiver pronto de qualquer lugar do seu aplicativo.

 importar {View, Stylesheet, Text} de 'React-native'; import {gestreHandlerRootView} de 'React-native-Gesture-Handler'; importar {SafeareAprovider} de 'react-native-sate-area-Context'; .
  useeffect (() => {Toast ('hello');
  }, []);

  Return (<SAVEREAPROVER> <gestreHandlerRootView style = {styles.container}> <liew> {/*o restante do seu aplicativo*/} </view> <Toasts/> {/*<---- Adicionar aqui*/} </gestureHandlerRootView> </sAfeareAprovider>
  );} const styles = stylesheet.create ({
  Container: {Flex: 1, alignitems: 'Center', justifyContent: 'Center',
  },});

Exemplo

Torrada regular

 Toast ("Esta é a minha primeira torrada", {
  duração: 3000,});

Promete brinde

 const Sleep = nova promessa ((resolver, rejeitar) => {
  setTimeout (() => {if (math.random ()> 0.5) {resolve ({nome de usuário: 'nick',});} else {rejeit ('nome de usuário é indefinido');}
  }, 2500);});
  dormir,
  {carregamento: 'carregando ...', sucesso: (dados: qualquer) => 'Welcome' + data.username, erro: (err) => err.toString (),
  },
  {Posição: ToastPosition.Bottom,
  });

Troada de carregamento

 const id = Toast.loading ('Estou carregando. Dispense -me sempre que ...'); setTimeout (() => {
  Toast.dismiss (id);}, 3000);

Torrada de sucesso

 Toast.success ('sucesso!', {
  largura: 300});

Restra de erro

 Toast.error ('uau. Isso foi péssimo!');