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. For this, we are going to use the ToastAndroid API of react-native. 

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

Javascript

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: