ToastAndroid
React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method show(message, duration)
which takes the following parameters:
- message A string with the text to toast
- duration The duration of the toast—either
ToastAndroid.SHORT
or ToastAndroid.LONG
You can alternatively use showWithGravity(message, duration, gravity)
to specify where the toast appears in the screen's layout. May be ToastAndroid.TOP
, ToastAndroid.BOTTOM
or ToastAndroid.CENTER
.
The 'showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)' method adds the ability to specify an offset with in pixels.
import React from "react";
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";
export default function App() {
const showToast = () => {
ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
};
const showToastWithGravity = () => {
ToastAndroid.showWithGravity(
"All Your Base Are Belong To Us",
ToastAndroid.SHORT,
ToastAndroid.CENTER
);
};
const showToastWithGravityAndOffset = () => {
ToastAndroid.showWithGravityAndOffset(
"A wild toast appeared!",
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
50
);
};
return (
<View style={styles.container}>
<Button title="Toggle Toast" onPress={() => showToast()} />
<Button
title="Toggle Toast With Gravity"
onPress={() => showToastWithGravity()}
/>
<Button
title="Toggle Toast With Gravity & Offset"
onPress={() => showToastWithGravityAndOffset()}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#888888",
padding: 8
}
});
The ToastAndroid API is imperative, but there is a way to expose a declarative component from it as in this example:
import React, { useState, useEffect } from "react";
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";
const Toast = ({ visible, message }) => {
if (visible) {
ToastAndroid.showWithGravityAndOffset(
message,
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
50
);
return null;
}
return null;
};
export default function App() {
const [visibleToast, setvisibleToast] = useState(false);
useEffect(() => setvisibleToast(false), [visibleToast]);
const handleButtonPress = () => {
setvisibleToast(true);
};
return (
<View style={styles.container}>
<Toast visible={visibleToast} message="Example" />
<Button title="Toggle Toast" onPress={() => handleButtonPress()} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#888888",
padding: 8
}
});
Reference
static show(message, duration)
static showWithGravity(message, duration, gravity)
static showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)
Indicates the duration on the screen.
ToastAndroid.SHORT;
Indicates the duration on the screen.
ToastAndroid.LONG;
Indicates the position on the screen.
ToastAndroid.TOP;
Indicates the position on the screen.
ToastAndroid.BOTTOM;
Indicates the position on the screen.
ToastAndroid.CENTER;