Hire the author: Martin K

Toast react image citation here 

GitHub link for this project GitHub

Introduction

React Native developers must create their own cross-platform toast libraries because iOS lacks a built-in toast capability. One such solution that we’ve shared with the React Native community is react-native-toast.

This solution is recommended since it is one of the most widely used and maintained open-source libraries that work on iOS and Android without requiring native code. The toasts can also be adjusted to look like the rest of your application.

In this brief article, I will show you how to develop the in-app toast as a notification for the app. Using our library, which is compatible with both Android and iOS, adding toast notifications is actually fairly simple.

Photo Preview

Glossary

A toast, according to the Android Developers Documentation, delivers straightforward feedback regarding an operation in the form of a little popup. It merely takes up the space needed for the message, while the current action stays visible and participatory. Toasts are automatically removed after a timeout.

Steps-by-step

This is a step-by-step procedure of implementing toast in your react native app.

Step 1: Install the NPM package

To start off, you need to install the NPM package as shown below

yarn add react-native-easy-toast
view raw toast.js hosted with ❤ by GitHub

You can use the following command instead of yarn if you don’t want to utilize yarn:

npm i react-native-easy-toast
view raw toast.npm hosted with ❤ by GitHub

Step 2: Add the ToastProvider in App.js

Then, in the App.js file, add the ToastProvider, which provides the context for the Toast hook.

Inside your component’s render method, use Toast as shown below. Make sure to include Toast at the bottom of the root view.

render() {
return (
<View>
...
<Toast ref={(toast) => this.toast = toast}/>
</View>
);
}
view raw toast.js hosted with ❤ by GitHub

Then you can use it like this:

this.toast.show('hello world!');
view raw toast.js hosted with ❤ by GitHub

That’s it, you’re ready to go! show a toast, and execute callback function to close it:

this.toast.show('hello world!', 500, () => {
// something you want to do at close
});
view raw toast.js hosted with ❤ by GitHub

To show a toast forever until you manually close it, use the code below:

this.toast.show('hello world!', DURATION.FOREVER);
view raw toast.js hosted with ❤ by GitHub

Use the code below to pass an element:

this.toast.show(<View><Text>hello world!</Text></View>);
// later on:
this.toast.close('hello world!');
view raw toast.js hosted with ❤ by GitHub

Optionally you can pass a delay in seconds to the close()-method as shown below:

this.toast.show(<View><Text>hello world!</Text></View>);
// later on:
this.toast.close('hello world!');
view raw toast.js hosted with ❤ by GitHub

Step 3:Using the toast anywhere in the app

Next, you can use the useToast function anywhere in your app to display an in-app notification.

render() {
return (
<View>
<Button title={'Press me'} onPress={()=>{
this.toast.show('hello world!',2000);
}}/>
<Toast ref={(toast) => this.toast = toast}/>
</View>
);
}
view raw toast.js hosted with ❤ by GitHub

Step 4: Creating a Custom Toast

Write the code below to be able to customize the toast according to the desired parameters.

render() {
return (
<View>
<Button title={'Press me'} onPress={()=>{
this.toast.show('hello world!',2000);
}}/>
<Toast
ref={(toast) => this.toast = toast}
style={{backgroundColor:'red'}}
position='top'
positionValue={200}
fadeInDuration={750}
fadeOutDuration={1000}
opacity={0.8}
textStyle={{color:'red'}}
/>
</View>
);
}
view raw toast.js hosted with ❤ by GitHub

Learning Tools

  • React Native Docs – This is a guide to go through before using React primitives render to native platform UI, enabling your app to use the same native platform APIs other apps do.
  • Android Studio – It’s a source code editor, which is a text editor that may assist you in writing software code by highlighting syntax with visual cues, providing language-specific auto-completion, and checking for errors as you type.

Learning Strategy

To be able to complete this React native project, you should have a basic knowledge of how React and Javascript programming works and be able to use the above tools. If you get stuck at any time, I also recommend using Google search.

Reflective Analysis

Given the number of moving pieces and external libraries used in this project, I learned to take a disciplined and systematic approach to writing after encountering some serious debugging challenges. One of the most important lessons learned here was not to rely on the IDE to automatically detect issues before running the program (static checking). Rather than waiting until the end of a few lines before executing the code, it is best to run it and check for errors after each new line.

Conclusion

The process took longer than anticipated; a 48-hour estimate for development proved insufficient; it took about a half-hour longer than anticipated. This was due to additional research on the use of toasts with react native. This is a very basic form of a production deployment, but it lays the groundwork for what to expect if a more complex application is involved.

Hire the author: Martin K