How to create toast in React Native ?

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.

In this article, we will be learning how to create toast in React Native.

Creating React Native App:

Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.

npm install -g expo-cli

Step 2: Create a react native project using expo.

expo init "gfg"

Step 3:Now go to the created project using the below command.

cd "gfg"

Project Structure: It will look like the following.

Adding the Toast: We can easily add toast in our react native app. This can be Achieved by using Several Methods. We can choose any one of them and Some of methods are given below with Example code and Output. For this, we are going to use the ToastAndroid API of react-native. 

1.Using ToastAndroidAPI

Example: Add the below code in the App.js file.

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

const GfGApp = () => {

  const GfGToast = () => {
    ToastAndroid.showWithGravity(
      "This is the demo text!!!!!!! ",
      ToastAndroid.SHORT,
      ToastAndroid.BOTTOM
    );
  };
  
  return (
    <View style={{ marginTop: 200 }}>
      <Text style={{fontSize:18}}>
          GeeksforGeeks React Native Toast
      </Text>
      <Button
        title="Toggle Toast "
        onPress={() => GfGToast()}
      />
    </View>
  );
};



export default GfGApp;

Here first we are creating our toast using the ToastAndroid.showWithGravity function. Then we are toggling the toast every time the user presses the button.

Step to run the application: Now run the application using the below command in the terminal.

npm run web

Output:

2. Using NPM Package

In this Approach we are using the npm package to show the toast messages in React Native App. For this we have to install that package in our React Native App.

npm i react-native-toast-message

You can use the above command to install the package. Now import Toast from react-native-toast-message package into our code.

Example Code:

import Toast from 'react-native-toast-message';
import React from 'react';

export default function Experience() {
  const showtoast =()=>{
    Toast.show({
      type:'info',
      text1:'Showing the Toast',
      text2:"From Ashok"
    })
  }
  return (
   <>
   <h1 style={{textAlign:'center'}}>Toast in React Native.</h1>
   <button onClick={showtoast} style={{backgroundColor:'greenyellow',height:'30px',borderRadius:'10px'}}>Show Toast</button>
   <Toast></Toast>
   </>
  );
}

Output: