ToastAndroid

React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method show(message, duration) which takes the following parameters:

message A string with the text to toast
duration The duration of the toast—either ToastAndroid.SHORT or ToastAndroid.LONG

You can alternatively use showWithGravity(message, duration, gravity) to specify where the toast appears in the screen's layout. May be ToastAndroid.TOP, ToastAndroid.BOTTOM or ToastAndroid.CENTER.

The 'showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)' method adds the ability to specify an offset with in pixels.

import React from "react";
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

export default function App() {
  const showToast = () => {
    ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
  };
  const showToastWithGravity = () => {
    ToastAndroid.showWithGravity(
      "All Your Base Are Belong To Us",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  };

  const showToastWithGravityAndOffset = () => {
    ToastAndroid.showWithGravityAndOffset(
      "A wild toast appeared!",
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => showToast()} />
      <Button
        title="Toggle Toast With Gravity"
        onPress={() => showToastWithGravity()}
      />
      <Button
        title="Toggle Toast With Gravity & Offset"
        onPress={() => showToastWithGravityAndOffset()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

Imperative hack

The ToastAndroid API is imperative, but there is a way to expose a declarative component from it as in this example:

import React, { useState, useEffect } from "react";
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

const Toast = ({ visible, message }) => {
  if (visible) {
    ToastAndroid.showWithGravityAndOffset(
      message,
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
    return null;
  }
  return null;
};

export default function App() {
  const [visibleToast, setvisibleToast] = useState(false);

  useEffect(() => setvisibleToast(false), [visibleToast]);

  const handleButtonPress = () => {
    setvisibleToast(true);
  };

  return (
    <View style={styles.container}>
      <Toast visible={visibleToast} message="Example" />
      <Button title="Toggle Toast" onPress={() => handleButtonPress()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

Reference

Methods

`show()`

static show(message, duration)

`showWithGravity()`

static showWithGravity(message, duration, gravity)

`showWithGravityAndOffset()`

static showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)

Properties

`SHORT`

Indicates the duration on the screen.

ToastAndroid.SHORT;

`LONG`

Indicates the duration on the screen.

ToastAndroid.LONG;

`TOP`

Indicates the position on the screen.

ToastAndroid.TOP;

`BOTTOM`

Indicates the position on the screen.

ToastAndroid.BOTTOM;

`CENTER`

Indicates the position on the screen.

ToastAndroid.CENTER;