React Native Basic Simple Typing Text Animation Android iOS Tutorial

Guys through this tutorial, I am going to explain and show you how we can create basic simple typing text animation in react native with blinking cursor support.

Note: I have also created a library for typing text animation named react-native-typing-text and uploaded on npm and github. If you want to use library then just follow this documentation.

In brief, what I am doing in Basic Simple Typing Text Animation tutorial?

  • I am creating two custom components one for typing text and cursor blinking animation and all functionalities required to perform typing text and blinking cursor animation and other one component which is responsible to create the instance of our first custom component and allows user to pass props to our first custom component.

Let’s get started…

Step – 1: Import required components from react , react-native , prop-types  packages.

1
2
3
import React, { Component } from 'react';
import { Text, View, Platform, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

Step – 2: Create first custom component named as TypingText , which is responsible to perform the required functionality for typing text animation.

Step – 3: Implement the constructor  method of TypingText  custom component.

1
2
3
4
5
6
7
8
9
10
11
12
constructor()
{
    super();
 
    this.index = 0;
 
    this.typing_timer = -1;
 
    this.blinking_cursor_timer = -1;
 
    this.state = { text: '', blinking_cursor_color: 'transparent' }
}

Explanation:

  • this.typing_timer  variable is used to set the time interval for typing text.
  • this.blinking_cursor_timer  variable is used to set the time interval for blinking cursor.

Step – 4: Implement the componentDidMount  method of TypingText  custom component.

1
2
3
4
5
componentDidMount()
{
    this.typingAnimation();
    this.blinkingCursorAnimation();
}

Explanation:

  • I am implementing two custom methods one for typing text animation and other for cursor blinking animation.

Step – 5: Implement the componentWillUnmout  method of TypingText  custom component.

1
2
3
4
5
6
7
8
9
10
componentWillUnmout()
{
    clearTimeout( this.typing_timer );
 
    this.typing_timer = -1;
 
    clearInterval( this.blinking_cursor_timer );
 
    this.blinking_cursor_timer = -1;
}

Explanation:

  • In this life cycle method, I just clear the this.typing_timer, this.blinking_cursor_timer  timers.

Step – 6: Implement the typingAnimation  method of  TypingText  custom component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
typingAnimation = () =>
{
    clearTimeout( this.typing_timer );
 
    this.typing_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.typing_timer = setTimeout(() =>
                {
                    this.typingAnimation();
                }, this.props.typingAnimationDuration);
            });
        }
    }
}

Explanation:

  • In this method, I am just increasing the index  variable’s value by one until index variable’s value less than given text length and then using this index  variable’s value I am getting the character using javascript charAt  method and appending the picked character in the existing text  state variable and updating the text state with updated text.
  • this.props.text, this.props.typingAnimationDuration  are props which will be provided as properties when the instance of the TypingText  component will be created.

Step – 7: Implement the blinkingCursorAnimation  method of  TypingText  custom component.

1
2
3
4
5
6
7
8
9
10
11
12
13
blinkingCursorAnimation = () =>
{
    this.blinking_cursor_timer = setInterval(() =>
    {
        if( this.refs.animatedText )
        {
            if( this.state.blinking_cursor_color == 'transparent' )
                this.setState({ blinking_cursor_color: this.props.color });
            else
                this.setState({ blinking_cursor_color: 'transparent' });
        }
    }, this.props.blinkingCursorAnimationDuration);
}

Explanation:

  • In this method, I am just toggling the cursor color to apply the blinking animation. I can perform the blinking cursor animation by using the react native Animated API but Animated.Text is not working inside the ordinary Text component that’s why I am toggling the color of the cursor to apply the blinking effect.
  • this.props.color, this.props.blinkingCursorAnimationDuration  are props which will be provided as properties when the instance of the TypingText  component will be created.

Step – 8: Implement the render  method of  TypingText  custom component.

1
2
3
4
5
6
7
8
9
10
render()
{
    return(
        <View style = {{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
            <Text ref = "animatedText" style = {{ color: this.props.color, fontSize: this.props.textSize, textAlign: 'center' }}>{ this.state.text }                
                <Text style = {{ color: this.state.blinking_cursor_color }}>|</Text>
            </Text>
        </View>
    );
}

Step – 9: Now create second custom component named as App ( in my case ), which is responsible to create the instance of the TypingText  component.

Step – 10: Implement the render  method of  App  custom component.

1
2
3
4
5
6
7
8
9
10
render()
{
    return(
        <View style = { styles.container }>
            <TypingText
                text = "The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar."
            />
        </View>
    );
}

Step – 11: Implement the custom styles for all required components.

1
2
3
4
5
6
7
8
9
10
11
12
const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 10,
        backgroundColor: 'black',
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
    }
});

Step – 12: Apply the propTypes  and defaultProps  for our custom TypingText  component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
TypingText.propTypes =
{
  text: PropTypes.string,
  color: PropTypes.string,
  textSize: PropTypes.number,
  typingAnimationDuration: PropTypes.number,
  blinkingCursorAnimationDuration: PropTypes.number
}
 
TypingText.defaultProps =
{
  text: "Default Typing Animated Text.",
  color: "rgb( 77, 192, 103 )",
  textSize: 30,
  typingAnimationDuration: 50,
  blinkingCursorAnimationDuration: 190
}

Complete Source Code:

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
import React, { Component } from 'react';
import { Text, View, Platform, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
 
class TypingText extends Component<{}>
{
    constructor()
    {
        super();
 
        this.index = 0;
 
        this.typing_timer = -1;
 
        this.blinking_cursor_timer = -1;
 
        this.state = { text: '', blinking_cursor_color: 'transparent' }
    }
 
    componentDidMount()
    {
        this.typingAnimation();
        this.blinkingCursorAnimation();
    }
 
    componentWillUnmout()
    {
        clearTimeout( this.typing_timer );
 
        this.typing_timer = -1;
 
        clearInterval( this.blinking_cursor_timer );
 
        this.blinking_cursor_timer = -1;
    }
 
    typingAnimation = () =>
    {
        clearTimeout( this.typing_timer );
 
        this.typing_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.typing_timer = setTimeout(() =>
                    {
                        this.typingAnimation();
                    }, this.props.typingAnimationDuration);
                });
            }
        }
    }
 
    blinkingCursorAnimation = () =>
    {
        this.blinking_cursor_timer = setInterval(() =>
        {
            if( this.refs.animatedText )
            {
                if( this.state.blinking_cursor_color == 'transparent' )
                    this.setState({ blinking_cursor_color: this.props.color });
                else
                    this.setState({ blinking_cursor_color: 'transparent' });
            }
        }, this.props.blinkingCursorAnimationDuration);
    }
 
    render()
    {
        return(
            <View style = {{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
                <Text ref = "animatedText" style = {{ color: this.props.color, fontSize: this.props.textSize, textAlign: 'center' }}>{ this.state.text }                
                    <Text style = {{ color: this.state.blinking_cursor_color }}>|</Text>
                </Text>
            </View>
        );
    }
}
 
export default class App extends Component<{}>
{
    render()
    {
        return(
            <View style = { styles.container }>
                <TypingText
                    text = "The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar."
                />
            </View>
        );
    }
}
 
const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 10,
        backgroundColor: 'black',
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
    }
});
 
TypingText.propTypes =
{
  text: PropTypes.string,
  color: PropTypes.string,
  textSize: PropTypes.number,
  typingAnimationDuration: PropTypes.number,
  blinkingCursorAnimationDuration: PropTypes.number
}
 
TypingText.defaultProps =
{
  text: "Default Typing Animated Text.",
  color: "rgb( 77, 192, 103 )",
  textSize: 30,
  typingAnimationDuration: 50,
  blinkingCursorAnimationDuration: 190
}

Step – 13: Execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshot:

  • Android Screenshot:

Leave a Reply

Your email address will not be published. Required fields are marked *