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

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.

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.

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

4. Output

Thank you 🙂

 

 

Leave a Reply

Your email address will not be published.