Toast

React Native não possui um componente de toast nativo incorporado como o Android ou o iOS. No entanto, você pode usar bibliotecas de terceiros para implementar um componente de toast em seu aplicativo React Native. Uma dessas bibliotecas populares é o react-native-toast-message. Aqui está um exemplo de como você pode usar esta biblioteca para mostrar toasts em seu aplicativo:

Instalação:

Primeiro, você precisa instalar a biblioteca react-native-toast-message em seu projeto. Use o npm ou o yarn para fazer isso:

# Usando npm
npm install @react-native-toast-message/core @react-native-toast-message/animated

# Usando yarn
yarn add @react-native-toast-message/core @react-native-toast-message/animated

Configuração Básica:

Após a instalação, você precisa configurar a biblioteca em seu componente principal (por exemplo, App.js):

import React from 'react';
import { ToastProvider } from 'react-native-toast-message';
import MeuComponente from './MeuComponente'; // Seu componente principal

const App = () => {
  return (
    <ToastProvider placement="bottom">
      <MeuComponente />
    </ToastProvider>
  );
};

export default App;

No exemplo acima, ToastProvider é usado para fornecer os contextos necessários para os toasts. placement define a posição padrão para os toasts. Você pode alterar placement para 'top', 'bottom', 'center', etc.

Usando Toasts em Seu Componente:

Agora você pode usar os toasts em qualquer componente em seu aplicativo. Por exemplo, em MeuComponente.js:

import React from 'react';
import { View, Button } from 'react-native';
import { useToast } from 'react-native-toast-message';

const MeuComponente = () => {
  const toast = useToast();

  const mostrarToast = () => {
    toast.show({
      type: 'success', // 'success', 'error', 'info' ou 'custom'
      text1: 'Toast de Exemplo',
      visibilityTime: 3000, // Duração do toast em milissegundos
    });
  };

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

export default MeuComponente;

Neste exemplo, useToast é usado para obter a função toast.show(), que é usada para mostrar o toast quando o botão é pressionado. Você pode personalizar a aparência do toast, incluindo a cor, a duração e o tipo de toast.

Por favor, consulte a documentação oficial do react-native-toast-message para obter mais detalhes e personalizações: React Native Toast Message.