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.
Top comments (0)