Typing text animation also known as Animated Type Writer, Computer Matrix movie style animated text typing style is used to show any text with typing text animation. Using this animation we can display text typing like some person is typing it on screen with blinking cursor ahead of it all the time. So in this tutorial we would going to implement Typing Text Animation in both iOS Android react native application Example Tutorial using Custom class method.
Live Screenshot of App:
Contents in this project Typing Text Animation in iOS Android React Native App Example Tutorial:
1. Import Platform, StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text } from ‘react-native’;
|
2. Import PropTypes module from prop-types class. This class is inbuilt class of react native and comes with react native itself. We are using custom props structure in this tutorial and in order to use Custom props we need to import this library.
|
1
|
import PropTypes from ‘prop-types’;
|
3. Create a new class named as AnimatedTypingText, This class would be our typing text class and using this class we would make Animated Typing Text component of our own .
|
1
2
3
4
5
6
7
|
class AnimatedTypingText extends Component<{}>
{
}
|
4. Create constructor() inside AnimatedTypingText class, Now we would make 3 this variables and 2 State variables.
this.index : Set the text default index to 0, So text starts typing from 0th index.
this.timer : It is used to set interval of time of typing text.
this.blinking_cursor : Set the interval of time of blinking cursor.
text : Holds the text inside Animated text component.
cursor_color : Default cursor color should be transparent.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
constructor()
{
super();
this.index = 0;
this.timer = –1;
this.blinking_cursor = –1;
this.state = {
text: ”,
cursor_color: ‘transparent’
}
}
|
5. Creating StartAnimatedTyping() function inside AnimatedTypingText class, This function would animated the typing animation and start typing from the 0th index of given text.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
StartAnimatedTyping = () =>
{
clearTimeout( this.timer );
this.timer = –1;
if( this.index < this.props.text.length )
{
if( this.refs.animatedText )
{
this.setState({ text: this.state.text + this.props.text.charAt( this.index ) }, () =>
{
this.index++;
this.timer = setTimeout(() =>
{
this.StartAnimatedTyping();
}, this.props.AnimatedTypingDuration);
});
}
}
}
|
6. Creating the AnimatedblinkingCursor() function inside AnimatedTypingText class, Inside this function we would simply toggle the cursor color between transparent and text color using animation though it will look like blinking cursor animation.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
AnimatedblinkingCursor = () =>
{
this.blinking_cursor = setInterval(() =>
{
if( this.refs.animatedText )
{
if( this.state.cursor_color == ‘transparent’ )
{
this.setState({ cursor_color: this.props.color });
}
else
{
this.setState({ cursor_color: ‘transparent’ });
}
}
}, this.props.AnimatedBlinkingCursorDuration);
}
|
7. Creating componentDidMount() function inside AnimatedTypingText class and call the both above created function inside it.
|
1
2
3
4
5
6
|
componentDidMount()
{
this.StartAnimatedTyping();
this.AnimatedblinkingCursor();
}
|
8. Creating componentWillUnmout() function inside AnimatedTypingText class and clear the typing text animation timer and blinking cursor.
|
1
2
3
4
5
6
7
8
9
10
|
componentWillUnmout()
{
clearTimeout( this.timer );
this.timer = –1;
clearInterval( this.blinking_cursor );
this.blinking_cursor = –1;
}
|
9. Creating a root view inside render’s return block of AnimatedTypingText class and make a Text component with custom props. This Text component is used to show typing text with animation.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render()
{
return(
<View style = {{ alignItems: ‘center’, flexDirection: ‘row’, justifyContent: ‘flex-start’ }}>
<Text ref = “animatedText” style = {{
color: this.props.TextColor,
fontSize: this.props.AnimatedTextSize,
textAlign: ‘center’ }}>
{ this.state.text }
<Text style = {{ color: this.state.cursor_color }}>|</Text>
</Text>
</View>
);
}
|
10. Complete source code for AnimatedTypingText 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
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
|
class AnimatedTypingText extends Component<{}>
{
constructor()
{
super();
this.index = 0;
this.timer = –1;
this.blinking_cursor = –1;
this.state = {
text: ”,
cursor_color: ‘transparent’
}
}
StartAnimatedTyping = () =>
{
clearTimeout( this.timer );
this.timer = –1;
if( this.index < this.props.text.length )
{
if( this.refs.animatedText )
{
this.setState({ text: this.state.text + this.props.text.charAt( this.index ) }, () =>
{
this.index++;
this.timer = setTimeout(() =>
{
this.StartAnimatedTyping();
}, this.props.AnimatedTypingDuration);
});
}
}
}
AnimatedblinkingCursor = () =>
{
this.blinking_cursor = setInterval(() =>
{
if( this.refs.animatedText )
{
if( this.state.cursor_color == ‘transparent’ )
{
this.setState({ cursor_color: this.props.color });
}
else
{
this.setState({ cursor_color: ‘transparent’ });
}
}
}, this.props.AnimatedBlinkingCursorDuration);
}
componentDidMount()
{
this.StartAnimatedTyping();
this.AnimatedblinkingCursor();
}
componentWillUnmout()
{
clearTimeout( this.timer );
this.timer = –1;
clearInterval( this.blinking_cursor );
this.blinking_cursor = –1;
}
render()
{
return(
<View style = {{ alignItems: ‘center’, flexDirection: ‘row’, justifyContent: ‘flex-start’ }}>
<Text ref = “animatedText” style = {{
color: this.props.TextColor,
fontSize: this.props.AnimatedTextSize,
textAlign: ‘center’ }}>
{ this.state.text }
<Text style = {{ color: this.state.cursor_color }}>|</Text>
</Text>
</View>
);
}
}
|
11. Creating the object as component of AnimatedTypingText class inside your Main default class.
text : Pass your text which you want to show using animation.
TextColor : Set typing text color.
AnimatedTextSize : Set typing text size.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
export default class App extends Component<{}>
{
render()
{
return(
<View style = { styles.MainContainer }>
<AnimatedTypingText
text = “Hello Friends, Welcome to ReactNativeCode.com, It’s been very Good to become one of the best React Native Tutorials Website on Internet.”
TextColor = “#00E676”
AnimatedTextSize = {25}
/>
</View>
);
}
}
|
12. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingHorizontal: 10,
backgroundColor: ‘#000’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
}
});
|
13. Creating custom props using propTypes class.
|
1
2
3
4
5
6
7
8
|
AnimatedTypingText.propTypes =
{
text: PropTypes.string,
AnimatedTextSize: PropTypes.number,
TextColor: PropTypes.string,
AnimatedTypingDuration: PropTypes.number,
AnimatedBlinkingCursorDuration: PropTypes.number
}
|
14. Setting up default value of all the newly created props.
|
1
2
3
4
5
6
7
8
|
AnimatedTypingText.defaultProps =
{
text: “Default Animated Typing Text.”,
TextColor: “#00E676”,
AnimatedTextSize: 25,
AnimatedTypingDuration: 60,
AnimatedBlinkingCursorDuration: 200
}
|
15. 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
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text } from ‘react-native’;
import PropTypes from ‘prop-types’;
class AnimatedTypingText extends Component<{}>
{
constructor()
{
super();
this.index = 0;
this.timer = –1;
this.blinking_cursor = –1;
this.state = {
text: ”,
cursor_color: ‘transparent’
}
}
StartAnimatedTyping = () =>
{
clearTimeout( this.timer );
this.timer = –1;
if( this.index < this.props.text.length )
{
if( this.refs.animatedText )
{
this.setState({ text: this.state.text + this.props.text.charAt( this.index ) }, () =>
{
this.index++;
this.timer = setTimeout(() =>
{
this.StartAnimatedTyping();
}, this.props.AnimatedTypingDuration);
});
}
}
}
AnimatedblinkingCursor = () =>
{
this.blinking_cursor = setInterval(() =>
{
if( this.refs.animatedText )
{
if( this.state.cursor_color == ‘transparent’ )
{
this.setState({ cursor_color: this.props.color });
}
else
{
this.setState({ cursor_color: ‘transparent’ });
}
}
}, this.props.AnimatedBlinkingCursorDuration);
}
componentDidMount()
{
this.StartAnimatedTyping();
this.AnimatedblinkingCursor();
}
componentWillUnmout()
{
clearTimeout( this.timer );
this.timer = –1;
clearInterval( this.blinking_cursor );
this.blinking_cursor = –1;
}
render()
{
return(
<View style = {{ alignItems: ‘center’, flexDirection: ‘row’, justifyContent: ‘flex-start’ }}>
<Text ref = “animatedText” style = {{
color: this.props.TextColor,
fontSize: this.props.AnimatedTextSize,
textAlign: ‘center’ }}>
{ this.state.text }
<Text style = {{ color: this.state.cursor_color }}>|</Text>
</Text>
</View>
);
}
}
export default class App extends Component<{}>
{
render()
{
return(
<View style = { styles.MainContainer }>
<AnimatedTypingText
text = “Hello Friends, Welcome to ReactNativeCode.com, It’s been very Good to become one of the best React Native Tutorials Website on Internet.”
TextColor = “#00E676”
AnimatedTextSize = {25}
/>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
paddingHorizontal: 10,
backgroundColor: ‘#000’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
}
});
AnimatedTypingText.propTypes =
{
text: PropTypes.string,
AnimatedTextSize: PropTypes.number,
TextColor: PropTypes.string,
AnimatedTypingDuration: PropTypes.number,
AnimatedBlinkingCursorDuration: PropTypes.number
}
AnimatedTypingText.defaultProps =
{
text: “Default Animated Typing Text.”,
TextColor: “#00E676”,
AnimatedTextSize: 25,
AnimatedTypingDuration: 60,
AnimatedBlinkingCursorDuration: 200
}
|
Screenshot in Android device:
Screenshots in iOS device:
Code Donated by :
Pankaj Sood
Also Read :
React Native JSON Parsing ListView From MySQL Database Android iOS
React Native Transform Scale Animation Android iOS Example
React Native Full Page Width Swipeable Horizontal ScrollView Android iOS
Android project not found Are you sure this is a React Native project? Error Solution
React Native Create and Show Array Elements in Text using MAP
