How to Create Toast in React Native (Android)

Last Updated on December 11, 2020.

If you are an Android app developer then you might already know what a toast is and how to use it in Android apps. You can create Toasts in React Native also.

You need to use ToastAndroid API to create toast in React Native. You can check out the official document of ToastAndroid here. We use the show method of ToastAndroid to show a predefined message and duration.

The following example shows the basic usage of toast in react native. The toast is shown when the Button is pressed.

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

const Home = () => {
  return (
    <View>
      <Button
        title="click to show toast"
        onPress={() => {
          ToastAndroid.show(
            'Toast message with long duration',
            ToastAndroid.SHORT,
          );
        }}
      />
    </View>
  );
};

export default Home;

Following is the output of the example.

react native toast

That’s how you show Toasts in react native.

Leave a Reply

%d bloggers like this: