ArchiveExpo SnackDiscord and ForumsNewsletter

Display a popup toast

Edit this page

Learn how to create a toast popup in an Expo project.

What is a toast

Toasts are the standard technique in mobile development for notifying your users about something without interrupting what they are doing.

According to the Android Developers Documentation: "A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout".

To present a toast, we recommend two solutions: an API from the react-native package and a library maintained by the React Native community.

Android-only: ToastAndroid

Toasts are a native feature of Android, but iOS doesn't have this by default. If you only need toasts on Android, you can use the ToastAndroid API provided by React Native.


To show a basic toast with ToastAndroid, import ToastAndroid from the 'react-native' package and call ToastAndroid.show with a message and duration option:

Using ToastAndroid API
import React from 'react';
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from 'react-native';

export default function App() {
  function showToast() {
    ToastAndroid.show('Request sent successfully!', ToastAndroid.SHORT);

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#6638f0',
    padding: 8,

The code above results in this on a Pixel 3a:

There are many other ways to configure your toast position, duration, and gravity options. Read the React Native ToastAndroid docs to learn more.

Cross-platform: react-native-root-toast

Since iOS doesn't have a built-in toast feature, React Native developers have to implement their own cross-platform toast libraries. react-native-root-toast is one such solution that the developer has shared with the React Native community.

We recommend this solution because it's one of the most used and maintained open-source libraries that work on Android and iOS without the need for native code. It also provides a lot of customization options, which means that you will be able to match the design of your toasts to the rest of your app.


To use react-native-root-toast, you have to install the module from npm with npm install react-native-root-toast.

Next, you must wrap the root component of your app with <RootSiblingParent> to allow toasts in any part of your app.

import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function
return (
  <RootSiblingParent>{/* <- use RootSiblingParent to wrap your root component */}
    <App />

Then, anywhere in your app, you can import Toast from 'react-native-root-toast'; and call Toast.show and Toast.hide to manage toasts on your screen.

// Add a Toast on screen.
let toast = Toast.show('Request failed to send.', {
  duration: Toast.durations.LONG,

// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function hideToast() {
}, 500);

react-native-root-toast also has a component API if you want to manage your toasts declaratively.

<Toast visible={this.state.visible}>Thanks for subscribing!</Toast>

This library has many options for customizing the appearance and behavior of your toast. See the package repository to learn more.