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 toastduration The duration of the toast—either ToastAndroid.SHORT or ToastAndroid.LONGYou 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" ;
const App = () =>const showToast = () =>"A pikachu appeared nearby !" , ToastAndroid.SHORT);
};
const showToastWithGravity = () =>"All Your Base Are Belong To Us" ,
ToastAndroid.SHORT,
ToastAndroid.CENTER
);
};
const showToastWithGravityAndOffset = () =>"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
}
});
export default App;
# 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 ;
};
const App = () =>const [visibleToast, setvisibleToast] = useState(false );
useEffect(() =>false ), [visibleToast]);
const handleButtonPress = () =>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
}
});
export default App;
# # show()# Copy static show ( message , duration )
showWithGravity()# Copy static showWithGravity ( message , duration , gravity )
showWithGravityAndOffset()# Copy static showWithGravityAndOffset ( message , duration , gravity , xOffset , yOffset )
# SHORT# Indicates the duration on the screen.
LONG# Indicates the duration on the screen.
TOP# Indicates the position on the screen.
BOTTOM# Indicates the position on the screen.
CENTER# Indicates the position on the screen.