How to use toast in React Native

Hi Guys, In this article, we are going to learn about How to use toast in React Native for both Android iOS platforms, basically toast is used to display some quick information to users. In React native they provide AndroidToast as a core component, but this component only works on the Android platform and you have to show Alert for the iOS platform so it is better to implement external dependencies which support both platforms. I have searched two nice dependencies which I am using in my project. and is very important to display informative messages to users without disturbing the user’s work. let’s start with an example

Here are the dependencies for React Native toast

• react-native-simple-toast
• react-native-easy-toast

I have checked both dependencies it’s properly working on both Android & iOS. let’s start with the first simple toast dependency

1. Install dependency

Install dependency using the following commend. to know more about this dependency check this link

npm install react-native-simple-toast --save

Usage for simple toast

The usage is very simple for this dependency you just need to import toast and use the following command to show a toast.

import Toast from 'react-native-simple-toast';

export default function Dashboard({navigation}) {

  return (
    <View style={{alignItems: 'center'}}>
      <Text style={{fontSize: 25, margin: 20, textAlign: 'center'}}>
        React native Android/iOS Toast
      </Text>
    

      <TouchableOpacity
        onPress={() => Toast.show('This is a long React native toast.', Toast.LONG)}
        style={{backgroundColor: 'blue', borderRadius: 5}}>
        <Text style={{color: 'white', margin: 10}}>Show Toast</Text>
      </TouchableOpacity>

   
    </View>
  );
}

3. Install the second dependency

The important feature of this toast is we can customize the style of dependency let’s understand usage.

Install dependency

Install using the following command and check this link to know more about this toast.

npm i react-native-easy-toast --save

Usage

We will have to put this component in our return method and using reference will display this on-screen. we will use useRef from React to get the reference of the component in a functional component like below

import React, {useState, useRef} from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Modal} from 'react-native';
//import Toast from 'react-native-simple-toast';
import Toast, {DURATION} from 'react-native-easy-toast'

export default function Dashboard({navigation}) {

  const showToastRef = useRef(null);

  return (
    <View style={{alignItems: 'center'}}>
      <Text style={{fontSize: 25, margin: 20, textAlign: 'center'}}>
        React native Android/iOS Toast
      </Text>
      <Toast ref={showToastRef} position="bottom" positionValue={200} />

      <TouchableOpacity
        onPress={() => showToastRef.current.show("Test")}
        style={{backgroundColor: 'blue', borderRadius: 5}}>
        <Text style={{color: 'white', margin: 10}}>Show Toast</Text>
      </TouchableOpacity> 
    </View>
  );
}

4. Output

Thank you 🙂