ToastAndroid en React Native: Mensajes Temporales en Android

---

Estructura básica de ToastAndroid

ToastAndroid es un módulo que permite mostrar un mensaje de texto breve en la parte inferior de la pantalla. El mensaje desaparece automáticamente después de un corto período.

import React from 'react';
import { Button, ToastAndroid, View } from 'react-native';

const App = () => {
const showToast = () => {
  ToastAndroid.show('¡Mensaje de Toast!', ToastAndroid.SHORT);
};

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Button title="Mostrar Toast" onPress={showToast} />
  </View>
);
};

export default App;

Propiedades de ToastAndroid

• show: Método utilizado para mostrar un mensaje toast. Recibe dos parámetros:

  • mensaje (String): El texto que se va a mostrar.
  • duración (Number): La duración del toast. Puede ser:
    • ToastAndroid.SHORT: Muestra el mensaje por un breve período de tiempo.
    • ToastAndroid.LONG: Muestra el mensaje por más tiempo.

• showWithGravity: Muestra un toast con una ubicación personalizada (parte superior, inferior, etc.).

• showWithGravityAndOffset: Permite mostrar un toast con ubicación personalizada y un desplazamiento adicional.

🚀 Ejemplo Básico de Uso

El siguiente ejemplo muestra cómo utilizar ToastAndroid.show para mostrar un mensaje breve cuando el usuario presiona un botón.

import React from 'react';
import { Button, ToastAndroid, View } from 'react-native';

const App = () => {
const showToast = () => {
  ToastAndroid.show('¡Operación exitosa!', ToastAndroid.SHORT);
};

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Button title="Mostrar Toast" onPress={showToast} />
  </View>
);
};

export default App;

Ubicación Personalizada

Puedes usar showWithGravity para cambiar la posición del toast (por ejemplo, superior, inferior, etc.).

ToastAndroid.showWithGravity(
'¡Este es un toast en la parte superior!',
ToastAndroid.LONG,
ToastAndroid.TOP
);

🧑‍💻 Desplazamiento Personalizado

Si necesitas agregar un desplazamiento adicional, puedes usar showWithGravityAndOffset. Esto permite modificar tanto la posición como el desplazamiento en píxeles.

ToastAndroid.showWithGravityAndOffset(
'¡Este es un toast con desplazamiento!',
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
0,
100
);