This tutorial explains how to generate toast message in react native application. React Native Toast is a component which is related to Android only and can be used to display information for the short period of time. A Toast contains the message to be displayed quickly and disappears after some time.
NOTE : React Native Toast is only for those who are targetting to Android platform only IOS doesn’t support Toast.
Code Snippet To Use Toast Message In React Native :
Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.
Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.
Step 3: Through react , react-native packages import all required components.
Step 4: Create a function named as _toastWithDurationHandler(), _toastWithDurationGravityHandler(), _toastWithDurationGravityOffsetHandler(). This function helps to to display different type of toast message in react native application.
Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component.
Step 6 : Apply the below style sheet design.
Screenshot :
This is all about How to Show Toast Message in React Native for Android Only. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
NOTE : React Native Toast is only for those who are targetting to Android platform only IOS doesn’t support Toast.
Code Snippet To Use Toast Message In React Native :
ToastAndroid.show(message, duration) ToastAndroid.showWithGravity(message, duration, gravity) ToastAndroid.showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)
Toast Message Example In React Native
Lets see the complete source code that helps to display toast message in react native applicationStep 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.
Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.
Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react'; import { StyleSheet, View, ToastAndroid, Button } from 'react-native';
Step 4: Create a function named as _toastWithDurationHandler(), _toastWithDurationGravityHandler(), _toastWithDurationGravityOffsetHandler(). This function helps to to display different type of toast message in react native application.
_toastWithDurationHandler = () => { //function to make Toast With Duration ToastAndroid.show('Simple Toast example', ToastAndroid.SHORT); } _toastWithDurationGravityHandler = () => { //function to make Toast With Duration And Gravity ToastAndroid.showWithGravity( 'Toast with center gravity', ToastAndroid.SHORT, //can be SHORT, LONG ToastAndroid.CENTER //can be TOP, BOTTON, CENTER ); } _toastWithDurationGravityOffsetHandler = () => { //function to make Toast With Duration, Gravity And Offset ToastAndroid.showWithGravityAndOffset( 'Toast with garavity and offset', ToastAndroid.LONG, //can be SHORT, LONG ToastAndroid.BOTTOM, //can be TOP, BOTTON, CENTER 30, //xOffset 50 //yOffset ); }
Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component.
render() { return ( <View style={styles.Container}> {/*To generate Toast With Duration*/} <Button title='Display Toast With Duration' onPress={this._toastWithDurationHandler} style={styles.Button} /> <View style={styles.Breaker} /> {/*To generate Toast With Duration And Gravity*/} <Button title='Display Toast With Duration AND Gravity' onPress={this._toastWithDurationGravityHandler} /> <View style={styles.Breaker} /> {/*To generate Toast With Duration, Gravity And Offset*/} <Button title='Display Toast With Duration, Gravity And Offset' onPress={this._toastWithDurationGravityOffsetHandler} /> </View> ); }
Step 6 : Apply the below style sheet design.
const styles = StyleSheet.create({ Container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, Breaker: { margin: 10, } });
Complete Source Code for App.js
Lets see the complete source code that helps to display toast message in react native applicationimport React, { Component } from 'react'; import { StyleSheet, View, ToastAndroid, Button } from 'react-native'; export default class App extends Component { _toastWithDurationHandler = () => { //function to make Toast With Duration ToastAndroid.show('Simple Toast example', ToastAndroid.SHORT); } _toastWithDurationGravityHandler = () => { //function to make Toast With Duration And Gravity ToastAndroid.showWithGravity( 'Toast with center gravity', ToastAndroid.SHORT, //can be SHORT, LONG ToastAndroid.CENTER //can be TOP, BOTTON, CENTER ); } _toastWithDurationGravityOffsetHandler = () => { //function to make Toast With Duration, Gravity And Offset ToastAndroid.showWithGravityAndOffset( 'Toast with garavity and offset', ToastAndroid.LONG, //can be SHORT, LONG ToastAndroid.BOTTOM, //can be TOP, BOTTON, CENTER 30, //xOffset 50 //yOffset ); } render() { return ( <View style={styles.Container}> {/*To generate Toast With Duration*/} <Button title='Display Toast With Duration' onPress={this._toastWithDurationHandler} style={styles.Button} /> <View style={styles.Breaker} /> {/*To generate Toast With Duration And Gravity*/} <Button title='Display Toast With Duration AND Gravity' onPress={this._toastWithDurationGravityHandler} /> <View style={styles.Breaker} /> {/*To generate Toast With Duration, Gravity And Offset*/} <Button title='Display Toast With Duration, Gravity And Offset' onPress={this._toastWithDurationGravityOffsetHandler} /> </View> ); } } const styles = StyleSheet.create({ Container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, Breaker: { margin: 10, } });
Screenshot :
No comments:
Post a Comment