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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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:
