React Native Custom Common Toast for both Android iOS App Tutorial

Toast is the one of the oldest component in android applications history. Its been present since the beginning of Android app development and continuously used by millions of developers. Toast is used to give a simple feedback on any given task when the task is completed. Toast would only obtain text message and automatically fill on screen according to given message. By default react native Android app supports Toast message but the iOS dose not support Toast. So in this tutorial we would going to create a React Native Custom Common Toast Library for both Android and iOS Application Example Tutorial with Top Bottom position and different color combination. You can make Toast in any given color using Custom Props option. So just pass the Color and the Toast would display in that particular color. So let’s get started 🙂 . See the Below GIF image to know how this toast would work in Mobile devices.

Live Screenshot :

Contents in this project Custom Common Toast for both Android iOS App Tutorial in React Native:

1. Import StyleSheet, View, Text, Button, Platform and Animated component in your project.

2. Import PropTypes from prop-types library. This is a inbuilt library of react native. This is used to set default props values. So when the user dose not give the value it will automatically set the default values in it.

3. Create a New class named as CustomToast in your App.js file. This would be our Toast rendering class.

4. Create constructor() in CustomToast class. We would declare animateOpacityValue using new Animated.Value() and set its default value to 0. Now make a State named as ShowToast. This would used to control the showing and hiding of Toast. Make a this variable named as this.ToastMessage = ‘ ‘ this would used to hold the message sent from Main class using prop.

5. Create componentWillUnmount() inbuilt method in CustomToast calls and declare this.timerID && clearTimeout(this.timerID) . This line of code would clear the timerID after un mounting the toast. This would help to Stop toast for rendering multiple times while it is showing. For example if the toast is currently displaying on screen then if user again press on button and call the Toast then it will stop toast to display multiple times until its complete display running toast.

6. Create a function named as ShowToastFunction() in CustomToast class. This function would animate the Fade in animation and show the toast on screen. We would call the HideToastFunction() in this function. So when the Toast completed showing then it will hide the toast using animation.

7. Create a function named as HideToastFunction() in CustomToast class. This function would hide the toast using Animation.

8. Create render’s return block in CustomToast class. We would set a if condition with ShowToast State. So if the State value is true then it will render this block. We would creating 2 custom props in this class.

this.props.position : This is a custom prop created by myself used to set position of Toast message. Parameter of this prop is: top, bottom. When we would call this Toast from our app’s main class we can pass the position from there.

9. Create Default props types with the name of your CustomToast class.

10. Here you go now all the CustomToast class coding is finish. Here is the complete code of CustomToast class with default props.

11. Create 4 functions in your app’s main class. with this.refs.ReferenceName. We would define the reference in render’s return block. We would call each function on button onPress event.

12. Create 4 buttons in render’s return block. We would call above each function on button click event. Define the CustomToast calls object using reference also. Pass the backgroundColor and position with this object.

13. Create Style for CustomToast class.

14. Complete source code for App.js File :

Screenshots in Android device :

Screenshot in iOS device :