Thursday, August 15, 2019

How to Show Toast Message in React Native for Android Only

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 :
ToastAndroid.show(message, duration)
ToastAndroid.showWithGravity(message, duration, gravity)
ToastAndroid.showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)

How to Show Toast Message in React Native for Android Only


Toast Message Example In React Native

Lets see the complete source code that helps to display toast message in react native application

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.
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 application

import 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 :
How to Show Toast Message in React Native for Android Only

How to Show Toast Message in React Native for Android Only

How to Show Toast Message in React Native for Android Only

How to Show Toast Message in React Native for Android Only

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.

No comments:

Post a Comment