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.

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.

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.

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.

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.

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.

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.

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.

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

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

Complete Source Code:

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 *