How to Display Toast Message in React Native?

Oct 04, 2022 . Admin

This tutorial will provide example of react native toast message. I’m going to show you about toast message in react native. We will look at example of toastandroid in react native. you can see toast alert in android. Alright, let’s dive into the steps.

In this example,We will learn toastandroid in react can easy and simply use in react can use ToastAndroid props in react native.below's this example.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the 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 showToast = () => {"Hello World", ToastAndroid.SHORT);

const showToastWithGravity = () => {
    "Hello World",

const showToastWithGravityAndOffset = () => {
    "A wild toast appeared!",

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.


It will help you...

#React Native