Toast

Learn toast messages.

Toast messages

A Toast is a small notification that briefly appears at the bottom of the screen. Unlike Alert it is not modal, does not block the user and disappears on its own after a few seconds. React Native provides the ToastAndroid component for Android.

Usage is simple: ToastAndroid.show(message, duration). Duration takes two values: ToastAndroid.SHORT (about 2 seconds) and ToastAndroid.LONG (about 3.5 seconds). ToastAndroid does not work on iOS; for iOS you need a library.

Toast durations

ToastAndroid has two constant duration values. ToastAndroid.SHORT shows the message for about 2 seconds; suitable for quick notifications. ToastAndroid.LONG shows it for about 3.5 seconds; preferred for longer text.

ToastAndroid.show(
  'Save successful',
  ToastAndroid.SHORT
);

You provide the duration as a constant, not a number. You must import ToastAndroid from the react-native package.

Exercise Your turn: show a Toast notification

Import ToastAndroid from react-native. When a button is pressed call ToastAndroid.show('Saved', ToastAndroid.SHORT).

Show example solution

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

function Screen() {
  return (
    <Button
      title="Save"
      onPress={() => ToastAndroid.show('Saved', ToastAndroid.SHORT)}
    />
  );
}

Test yourself

Match: Toast and Alert

Toast

auto-dismisses
Alert

blocks until pressed
ToastAndroid.SHORT

short duration
On which platform does ToastAndroid work?
```
ToastAndroid.show('Hello', ToastAndroid.SHORT)
```
- Only iOS
- Both iOS and Android
- Only Android
- Only web
Show answer

Only Android — ToastAndroid works only on Android.

Fill in the blank: Toast call

ToastAndroid.____('Saved', ToastAndroid.SHORT);

Show answer

ToastAndroid.show('Saved', ToastAndroid.SHORT);

Next lesson: Modal

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies