custom software development

The community of React Native offers a huge amount of ready to use libraries that can handle showing small messages called Toast. However, implementing it on our own is not a big effort. Additionally, we get full control of their behavior and look. Using Context API and hooks we can implement such a solution in no time. 

First of all, we need to create context and Provider component:

<Gist id="b3d122d185f091a6f1dc84f5609fec3c" /> 

in context, we have 3 available keys, two for manipulating toast visibility and one for getting state of toast

Now we need to create Consumer component:

<Gist id="3a4e399bf9ba0f4ca819ee02039265d5" /> 

here we use `useContext` hook to get current toast state and we running Animation using `useEffect` hooks. Additionally, we allow the user to close Toast when clicking on it.

Lets add some styles to our Toast component:

<Gist id="54d735a8761b6e2d7dc6ff0b680c9a57" /> 

However, we can add auto-hidding into our Toast provider by adding `useEffect` hook inside out ToastProvider

<Gist id="48c2d3a217a0c481294b2053ccc43649" /> 

Now we can connect our provider and consumer to the App:

<Gist id="e9999203a0fd3347ced72687f255d5a8" /> 

Yea! I know we can put Consumer login inside Provider and expose only show/hide method to context, but I want to have a more flexible solution (where I can put Consumer wherever I want in the application structure)

Now we can show our Toast from whatever screen we want:

<Gist id="8ed221c2f501074b581c217b5128165d" /> 

And voila!

<div class="text-center">

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/285x564/9aa06b0934/simple_toast.gif)

</div>


The whole working code you can find at <https://github.com/Selleo/ReactNativeSimpleToastExample>

The community of React Native offers a huge amount of ready to use libraries that can handle showing small messages called Toast. However, implementing it on our own is not a big effort. Additionally, we get full control of their behavior and look. Using Context API and hooks we can implement such a solution in no time. 

Simple Toast In React Native Using Context API And Hooks

Looking for expert development team?

Wojciech Bożek

Related articles

Why ReactJS Is A Perfect Fit For SaaS Solutions?

Is React A Good Pick For 2022?

Outsourcing ReactJS Development Services | Learn How To Do It Right