This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters:
String message: A string with the text to toast int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG There is also a function showWithGravity to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.
The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.
Basic usage:
Copy import { ToastAndroid } from 'react-native' ;
ToastAndroid . show (
'A pikachu appeared nearby !' ,
ToastAndroid . SHORT
) ;
ToastAndroid . showWithGravity (
'All Your Base Are Belong To Us' ,
ToastAndroid . SHORT ,
ToastAndroid . CENTER
) ;
ToastAndroid . showWithGravityAndOffset (
'A wild toast appeared!' ,
ToastAndroid . LONG ,
ToastAndroid . BOTTOM ,
25 ,
50
) ;
# The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
Copy import React , { Component } from 'react' ;
import { View , Button , ToastAndroid } from 'react-native' ;
const Toast = ( props ) => {
if ( props . visible ) {
ToastAndroid . showWithGravityAndOffset (
props . message ,
ToastAndroid . LONG ,
ToastAndroid . BOTTOM ,
25 ,
50
) ;
return null ;
}
return null ;
} ;
class App extends Component {
constructor ( props ) {
super ( props ) ;
this . state = {
visible : false
} ;
}
handleButtonPress = ( ) => {
this . setState (
{
visible : true
} ,
( ) => {
this . hideToast ( ) ;
}
) ;
} ;
hideToast = ( ) => {
this . setState ( {
visible : false
} ) ;
} ;
render ( ) {
return (
< View style = { styles . container } >
< Toast visible = { this . state . visible } message = " Example " />
< Button
title = " Toggle Modal "
onPress = { this . handleButtonPress }
/>
</ View >
) ;
}
}
# # 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.