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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Modal, Text, Button, Platform, Animated } from ‘react-native’;
|
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.
|
1
|
import PropTypes from ‘prop-types’;
|
3. Create a New class named as CustomToast in your App.js file. This would be our Toast rendering class.
|
1
2
3
4
|
class CustomToast extends Component
{
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class CustomToast extends Component
{
constructor()
{
super();
this.animateOpacityValue = new Animated.Value(0);
this.state = {
ShowToast: false
}
this.ToastMessage = ”;
}
}
|
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.
|
1
2
3
4
5
|
componentWillUnmount()
{
this.timerID && clearTimeout(this.timerID);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
ShowToastFunction( message = “Custom React Native Toast”, duration = 4000)
{
this.ToastMessage = message;
this.setState({ ShowToast: true }, () =>
{
Animated.timing
(
this.animateOpacityValue,
{
toValue: 1,
duration: 500
}
).start(this.HideToastFunction(duration))
});
}
|
7. Create a function named as HideToastFunction() in CustomToast class. This function would hide the toast using Animation.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
HideToastFunction = (duration) =>
{
this.timerID = setTimeout(() =>
{
Animated.timing
(
this.animateOpacityValue,
{
toValue: 0,
duration: 500
}
).start(() =>
{
this.setState({ ShowToast: false });
clearTimeout(this.timerID);
})
}, duration);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render()
{
if(this.state.ShowToast)
{
return(
<Animated.View style = {[ styles.animatedToastView, { opacity: this.animateOpacityValue, top: (this.props.position == ‘top’) ? ‘10%’ : ‘80%’, backgroundColor: this.props.backgroundColor }]}>
<Text numberOfLines = { 1 } style = {[ styles.ToastBoxInsideText, { color: this.props.textColor }]}>{ this.ToastMessage }</Text>
</Animated.View>
);
}
else
{
return null;
}
}
|
9. Create Default props types with the name of your CustomToast class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
CustomToast.propTypes = {
backgroundColor: PropTypes.string,
position: PropTypes.oneOf([
‘top’,
‘bottom’
]),
textColor: PropTypes.string
};
CustomToast.defaultProps =
{
backgroundColor: ‘#666666’,
textColor: ‘#fff’
}
|
10. Here you go now all the CustomToast class coding is finish. Here is the complete code of CustomToast class with default props.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
class CustomToast extends Component
{
constructor()
{
super();
this.animateOpacityValue = new Animated.Value(0);
this.state = {
ShowToast: false
}
this.ToastMessage = ”;
}
componentWillUnmount()
{
this.timerID && clearTimeout(this.timerID);
}
ShowToastFunction( message = “Custom React Native Toast”, duration = 4000)
{
this.ToastMessage = message;
this.setState({ ShowToast: true }, () =>
{
Animated.timing
(
this.animateOpacityValue,
{
toValue: 1,
duration: 500
}
).start(this.HideToastFunction(duration))
});
}
HideToastFunction = (duration) =>
{
this.timerID = setTimeout(() =>
{
Animated.timing
(
this.animateOpacityValue,
{
toValue: 0,
duration: 500
}
).start(() =>
{
this.setState({ ShowToast: false });
clearTimeout(this.timerID);
})
}, duration);
}
render()
{
if(this.state.ShowToast)
{
return(
<Animated.View style = {[ styles.animatedToastView, { opacity: this.animateOpacityValue, top: (this.props.position == ‘top’) ? ‘10%’ : ‘80%’, backgroundColor: this.props.backgroundColor }]}>
<Text numberOfLines = { 1 } style = {[ styles.ToastBoxInsideText, { color: this.props.textColor }]}>{ this.ToastMessage }</Text>
</Animated.View>
);
}
else
{
return null;
}
}
}
CustomToast.propTypes = {
backgroundColor: PropTypes.string,
position: PropTypes.oneOf([
‘top’,
‘bottom’
]),
textColor: PropTypes.string
};
CustomToast.defaultProps =
{
backgroundColor: ‘#666666’,
textColor: ‘#fff’
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
Default_Toast_Bottom=()=>
{
this.refs.defaultToastBottom.ShowToastFunction(‘Default Toast Bottom Message.’);
}
Default_Toast_Top=()=>
{
this.refs.defaultToastTop.ShowToastFunction(‘Default Toast Top Message.’);
}
Default_Toast_Bottom_With_Different_Color=()=>
{
this.refs.defaultToastBottomWithDifferentColor.ShowToastFunction(‘Default Toast Bottom Message With Different Color.’);
}
Default_Toast_Top_With_Different_Color=()=>
{
this.refs.defaultToastTopWithDifferentColor.ShowToastFunction(‘Default Toast Top Message With Different Color.’);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
render() {
return (
<View style={styles.MainContainer}>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Bottom} title=“Click Here To Show Default Toast Bottom Message”/>
</View>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Top} title=“Click Here To Show Default Toast Top Message”/>
</View>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Bottom_With_Different_Color} title=“Click Here To Show Default Toast Bottom Message With Different Color”/>
</View>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Top_With_Different_Color} title=“Click Here To Show Default Toast Top Message With Different Color”/>
</View>
<CustomToast ref = “defaultToastBottom” position = “bottom”/>
<CustomToast ref = “defaultToastTop” position = “top”/>
<CustomToast ref = “defaultToastBottomWithDifferentColor” backgroundColor=‘#4CAF50’ position = “bottom”/>
<CustomToast ref = “defaultToastTopWithDifferentColor” backgroundColor=‘#E91E63’ position = “top”/>
</View>
);
}
|
13. Create Style for CustomToast class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0,
margin:10
},
animatedToastView:
{
marginHorizontal: 30,
paddingHorizontal: 25,
paddingVertical: 10,
borderRadius: 25,
zIndex: 9999,
position: ‘absolute’,
justifyContent: ‘center’
},
ToastBoxInsideText:
{
fontSize: 15,
alignSelf: ‘stretch’,
textAlign: ‘center’
}
});
|
14. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Modal, Text, Button, Platform, Animated } from ‘react-native’;
import PropTypes from ‘prop-types’;
class CustomToast extends Component
{
constructor()
{
super();
this.animateOpacityValue = new Animated.Value(0);
this.state = {
ShowToast: false
}
this.ToastMessage = ”;
}
componentWillUnmount()
{
this.timerID && clearTimeout(this.timerID);
}
ShowToastFunction( message = “Custom React Native Toast”, duration = 4000)
{
this.ToastMessage = message;
this.setState({ ShowToast: true }, () =>
{
Animated.timing
(
this.animateOpacityValue,
{
toValue: 1,
duration: 500
}
).start(this.HideToastFunction(duration))
});
}
HideToastFunction = (duration) =>
{
this.timerID = setTimeout(() =>
{
Animated.timing
(
this.animateOpacityValue,
{
toValue: 0,
duration: 500
}
).start(() =>
{
this.setState({ ShowToast: false });
clearTimeout(this.timerID);
})
}, duration);
}
render()
{
if(this.state.ShowToast)
{
return(
<Animated.View style = {[ styles.animatedToastView, { opacity: this.animateOpacityValue, top: (this.props.position == ‘top’) ? ‘10%’ : ‘80%’, backgroundColor: this.props.backgroundColor }]}>
<Text numberOfLines = { 1 } style = {[ styles.ToastBoxInsideText, { color: this.props.textColor }]}>{ this.ToastMessage }</Text>
</Animated.View>
);
}
else
{
return null;
}
}
}
export default class Mynewproject extends Component {
Default_Toast_Bottom=()=>
{
this.refs.defaultToastBottom.ShowToastFunction(‘Default Toast Bottom Message.’);
}
Default_Toast_Top=()=>
{
this.refs.defaultToastTop.ShowToastFunction(‘Default Toast Top Message.’);
}
Default_Toast_Bottom_With_Different_Color=()=>
{
this.refs.defaultToastBottomWithDifferentColor.ShowToastFunction(‘Default Toast Bottom Message With Different Color.’);
}
Default_Toast_Top_With_Different_Color=()=>
{
this.refs.defaultToastTopWithDifferentColor.ShowToastFunction(‘Default Toast Top Message With Different Color.’);
}
render() {
return (
<View style={styles.MainContainer}>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Bottom} title=“Click Here To Show Default Toast Bottom Message”/>
</View>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Top} title=“Click Here To Show Default Toast Top Message”/>
</View>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Bottom_With_Different_Color} title=“Click Here To Show Default Toast Bottom Message With Different Color”/>
</View>
<View style={{marginBottom: 12}}>
<Button onPress={this.Default_Toast_Top_With_Different_Color} title=“Click Here To Show Default Toast Top Message With Different Color”/>
</View>
<CustomToast ref = “defaultToastBottom” position = “bottom”/>
<CustomToast ref = “defaultToastTop” position = “top”/>
<CustomToast ref = “defaultToastBottomWithDifferentColor” backgroundColor=‘#4CAF50’ position = “bottom”/>
<CustomToast ref = “defaultToastTopWithDifferentColor” backgroundColor=‘#E91E63’ position = “top”/>
</View>
);
}
}
CustomToast.propTypes = {
backgroundColor: PropTypes.string,
position: PropTypes.oneOf([
‘top’,
‘bottom’
]),
textColor: PropTypes.string
};
CustomToast.defaultProps =
{
backgroundColor: ‘#666666’,
textColor: ‘#fff’
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0,
margin:10
},
animatedToastView:
{
marginHorizontal: 30,
paddingHorizontal: 25,
paddingVertical: 10,
borderRadius: 25,
zIndex: 9999,
position: ‘absolute’,
justifyContent: ‘center’
},
ToastBoxInsideText:
{
fontSize: 15,
alignSelf: ‘stretch’,
textAlign: ‘center’
}
});
|
Screenshots in Android device :
Screenshot in iOS device :
Also Read :
React Native Change Image Source Dynamically using State on Button Click
React Native Layout Animation API Android iOS Example Tutorial
React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial
React Native Align Position Button View at Bottom of Screen Example
Example of Creating Pre Populated SQLite Database For React Native
