How to display a popup toast
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.Usage
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} />
</View>
);
}
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 iOS and Android 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.
Usage
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 />
</RootSiblingParent>
);
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() {
Toast.hide(toast);
}, 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.