How to create a toast in React Native? Code Example

To create a toast in React Native, we can use ToastAndroid api which provides 3 methods –

1. show(message, duration)
   • message – The text message to display in toast.
   • duration – Either of these values – ToastAndroid.SHORT, ToastAndroid.LONG
2. showWithGravity(message, duration, gravity)
   • gravity – Location to show toast. Possible values are – ToastAndroid.TOP, ToastAndroid.CENTER, ToastAndroid.BOTTOM.
3. showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)
   • xOffset – Offset from gravity in x-direction.
   • yOffset – Offset from gravity in y-direction.

We can show the toast like this –

ToastAndroid.show(
          "This is message", 
          ToastAndroid.SHORT
)

ToastAndroid.showWithGravity(
          "This is message", 
          ToastAndroid.LONG,
          ToastAndroid.CENTER
)

ToastAndroid.showWithGravityAndOffset(
          "This is message",
          ToastAndroid.SHORT,
          ToastAndroid.TOP,
          24,
          18
)

Code Example

import React from "react";
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from "react-native";

const App = () => {
  const showToast = () => {
    ToastAndroid.show(
      "This is a toast message!", 
      ToastAndroid.SHORT
    );
  };

  const showToastWithGravity = () => {
    ToastAndroid.showWithGravity(
      "This may show at center",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  };

  const showToastWithGravityAndOffset = () => {
    ToastAndroid.showWithGravityAndOffset(
      "This may show at top with offset",
      ToastAndroid.LONG,
      ToastAndroid.TOP,
      25,
      50
    );
  };

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

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

export default App;

Output –

The above image shows how the toast will look like on Android phone.

Live Demo