Criando mensagens Toast em React Native

Muitas vezes desejamos mostrar uma mensagem de alerta na tela de um usuário e podemos usar diversos meios como um Text ou até um Alert para aviso. Entretanto o React tem a sua disponibilidade os Toast de notificação. Neste artigo iremos criar Toasts. Ele fornece dois tipos de toasts: sucesso e erro, que são personalizáveis ​​por meio do objeto ToastConfig fornecido.

Instalação da biblioteca Toast -

Para usar este componente, instale-o como um pacote npm:

npm install --save react-native-toast-message
yarn add react-native-toast-message

Utilizando o Toast-

Importe o Provider componente do pacote e envolva-o em seu componente principal:

import Toast from "react-native-toast-message";

const App = () => {
  return (
    <View>
      {/* Your main component */}
      <Toast.Provider />
    </View>
  );
};

Isso cria um provedor toast que pode ser usado para mostrar mensagens toast. Para mostrar uma mensagem toast, basta chamar o método showSuccess ou showError do Toast objeto:

import Toast from "react-native-toast-message";

const ExampleComponent = () => {
  const handleButtonClick = () => {
    Toast.showSuccess("Success message");
    Toast.showError("Error message");
  };

  return (
    <View>
      <Button title="Show Toast" onPress={handleButtonClick} />
    </View>
  );
};

Por padrão, o componente será exibido na parte inferior da tela, acima do teclado (se estiver visível). Você pode personalizar a aparência do brinde passando um ToastConfigobjeto para o componente Provider:

import Toast from "react-native-toast-message";

const config = {
  successStyle: {
    backgroundColor: "#00FF00",
  },
  errorStyle: {
    backgroundColor: "#FF0000",
  },
  textStyle: {
    color: "#FFFFFF",
  },
};

const App = () => {
  return (
    <View>
      {/* Your main component */}
      <Toast.Provider config={config} />
    </View>
  );
};

Com isso, conseguimos ver o quão fácil é utilizar o Toast. Espero que este artigo tenha o ajudado a criar mensagens de notificação para sua aplicação mobile feita em React Native. Obrigado por ler até aqui.