React Native Toast Notification Example

Hi Guys,

In this blog, I will explain you how to use toast in react native. You can easily use toast in react native. First i will create import namespace ToastAndroid

Here, I will give you full example for simply display toast using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init Toast 

Step 2 - App.js

In this step, You will open App.js file and put the code.

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

const App = () => {
  const dispToast = () => {
    ToastAndroid.show("A toast alert !", ToastAndroid.SHORT);
  };

  const dispToastWithGravity = () => {
    ToastAndroid.showWithGravity(
      "All Your Base Are Belong To Us",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  };

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

  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => dispToast()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 30
  }
});

export default App;

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...