React Native Basic Simple Typing Text Animation

This tutorial explains how to create basic simple typing text animation in react native with blinking cursor support. In this example we are going to create AnimationTypingText custom components typing text and cursor blinking animation and all functionalities required to perform typing text and blinking cursor animation and In the App component we will create the instance of our AnimationTypingText custom component and allows user to pass props to our custom component.

React Native Typing Text Animation 

Project Structure :
Lets see the project structure.

Lets see the below example, where we are going to create basic simple typing text animation in react native with blinking cursor support. Hope you like this example.

Step 1: First create the new reactive project.

Step 2: Lets create a new component named as AnimationTypingText. This component will to create basic simple typing text animation in react native with blinking cursor support.

• Implement the constructor  method of AnimationTypingText custom component.

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

• Implement the componentDidMount  method of AnimationTypingText custom component. Here we are implementing two custom methods one for typing text animation and other for cursor blinking animation.
• Implement the componentWillUnmout method of AnimationTypingText custom component.In this life cycle method, I just clear the this.typing_timer, this.blinking_cursor_timer  timers.
•  Implement the typingAnimation method of AnimationTypingText custom component.

1. 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.
2. this.props.text, this.props.typingAnimationDuration  are props which will be provided as properties when the instance of the AnimationTypingText component will be created.

• Implement the blinkingCursorAnimation method of AnimationTypingText custom component.

1. In this method, we are just toggling the cursor color to apply the blinking animation. we 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.
2. this.props.color, this.props.blinkingCursorAnimationDuration  are props which will be provided as properties when the instance of the AnimationTypingText component will be created.

• Implement the render  method of AnimationTypingText custom component.
• Implement the custom styles for all required components.
• Apply the propTypes  and defaultProps  for our custom AnimationTypingText component.

Lets see the complete source code for AnimationTypingText Component.

AnimationTypingText

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

export default class AnimationTypingText 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>
        );
    }
}

AnimationTypingText.propTypes =
{
  text: PropTypes.string,
  color: PropTypes.string,
  textSize: PropTypes.number,
  typingAnimationDuration: PropTypes.number,
  blinkingCursorAnimationDuration: PropTypes.number
}

AnimationTypingText.defaultProps =
{
  text: "Default Typing Animated Text.",
  color: "rgb( 77, 192, 103 )",
  textSize: 30,
  typingAnimationDuration: 50,
  blinkingCursorAnimationDuration: 190
}

Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, View,   } from 'react-native';
import AnimationTypingText from './src/components/AnimationTypingText';

Step 5: Open App.js component and and Implement render method. Apply the below code inside the render block of your App component.

export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <AnimationTypingText
          text="Welcome to www.skptricks.com. share your comments, thoughts and feedback to us. Hope you like our tutorials"
        />
      </View>
    );
  }

}

Step 6: Apply the below style sheet design. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },

});

Lets see the complete source code for App component.
App

import React, { Component } from 'react';
import { Platform, StyleSheet, View,   } from 'react-native';
import AnimationTypingText from './src/components/AnimationTypingText';


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <AnimationTypingText
          text="Welcome to www.skptricks.com. share your comments, thoughts and feedback to us. Hope you like our tutorials"
        />
      </View>
    );
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },

});

Screenshot : 

Click here to see the demo 

This is all about React Native Basic Simple Typing Text Animation with blinking cursor support. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.