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 |
You can use the following command instead of yarn if you don’t want to utilize yarn:
| npm i react-native-easy-toast |
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> | |
| ); | |
| } |
Then you can use it like this:
| this.toast.show('hello world!'); |
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 | |
| }); |
To show a toast forever until you manually close it, use the code below:
| this.toast.show('hello world!', DURATION.FOREVER); |
Use the code below to pass an element:
| this.toast.show(<View><Text>hello world!</Text></View>); | |
| // later on: | |
| this.toast.close('hello world!'); |
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!'); |
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> | |
| ); | |
| } |
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> | |
| ); | |
| } |
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.
This idea/ solution in the future when modernized can be used in many other important ways like displaying response messages from back-end API triggered from the mobile app, handling the display of push notifications.