1---
2title: Display a popup toast
3description: Learn how to create a toast popup in an Expo project.
4---
5
6import ImageSpotlight from '~/components/plugins/ImageSpotlight';
7import { SnackInline } from '~/ui/components/Snippet';
8
9## What is a toast?
10
11Toasts are the standard technique in mobile development for notifying your users about something without interrupting what they are doing.
12
13According to the [Android Developers
14Documentation](https://developer.android.com/guide/topics/ui/notifiers/toasts): "A toast provides
15simple feedback about an operation in a small popup. It only fills the amount of space required for
16the message and the current activity remains visible and interactive. Toasts automatically disappear
17after a timeout".
18
19To present a toast, we recommend two solutions: an API from the `react-native` package and a library
20maintained by the React Native community.
21
22## Android-only: `ToastAndroid`
23
24Toasts are a native feature of Android, but iOS doesn't have this by default. If you only need
25toasts on Android, you can use the [`ToastAndroid`](https://reactnative.dev/docs/toastandroid) API
26provided by React Native.
27
28### Usage
29
30To show a basic toast with `ToastAndroid`, import `ToastAndroid` from the `'react-native'` package
31and call `ToastAndroid.show` with a message and duration option:
32
33<SnackInline label="Using ToastAndroid API" platforms={['android']}>
34
35```jsx
36import React from 'react';
37import { View, StyleSheet, ToastAndroid, Button, StatusBar } from 'react-native';
38
39export default function App() {
40  function showToast() {
41    ToastAndroid.show('Request sent successfully!', ToastAndroid.SHORT);
42  }
43
44  return (
45    <View style={styles.container}>
46      <Button title="Show Toast" onPress={showToast} />
47    </View>
48  );
49}
50
51const styles = StyleSheet.create({
52  container: {
53    flex: 1,
54    justifyContent: 'center',
55    paddingTop: StatusBar.currentHeight,
56    backgroundColor: '#6638f0',
57    padding: 8,
58  },
59});
60```
61
62</SnackInline>
63
64The code above results in this on a Pixel 3a:
65
66<ImageSpotlight
67  style={{ maxWidth: 360 }}
68  alt="Pixel 3a showing toast message in an app"
69  src="/static/images/ToastAndroid.png"
70/>
71
72There are many other ways to configure your toast position, duration, and gravity options. Read the
73[React Native `ToastAndroid`](https://reactnative.dev/docs/toastandroid) docs to learn more.
74
75## Cross-platform: `react-native-root-toast`
76
77Since iOS doesn't have a built-in toast feature, React Native developers have to implement their own
78cross-platform toast libraries.
79[`react-native-root-toast`](https://github.com/magicismight/react-native-root-toast) is one such
80solution that the developer has shared with the React Native community.
81
82We recommend this solution because it's one of the most used and maintained open-source libraries that
83work on Android and iOS without the need for native code. It also provides a lot of customization
84options, which means that you will be able to match the design of your toasts to the rest of your app.
85
86### Usage
87
88To use `react-native-root-toast`, you have to [install the module](https://github.com/magicismight/react-native-root-toast) from npm with `npm install react-native-root-toast`.
89
90Next, you must wrap the root component of your app with `<RootSiblingParent>` to allow toasts in any
91part of your app.
92
93```jsx
94import { RootSiblingParent } from 'react-native-root-siblings';
95
96// in your render function
97return (
98  <RootSiblingParent>  // <- use RootSiblingParent to wrap your root component
99    <App />
100  </RootSiblingParent>
101);
102```
103
104Then, anywhere in your app, you can `import Toast from 'react-native-root-toast';` and call
105`Toast.show` and `Toast.hide` to manage toasts on your screen.
106
107```jsx
108// Add a Toast on screen.
109let toast = Toast.show('Request failed to send.', {
110  duration: Toast.durations.LONG,
111});
112
113// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
114setTimeout(function hideToast() {
115  Toast.hide(toast);
116}, 500);
117```
118
119`react-native-root-toast` also has a component API if you want to manage your toasts declaratively.
120
121```jsx
122<Toast visible={this.state.visible}>Thanks for subscribing!</Toast>
123```
124
125This library has many options for [customizing the appearance and behavior](https://github.com/magicismight/react-native-root-toast#reference) of your toast.
126See the package [repository](https://github.com/magicismight/react-native-root-toast) to learn more.
127