react-native-typewriter

A React Native component for creating typing effects. Inspired by react-typewriter.

Installation

$ yarn add @salesp07/react-native-typewriter

OR

$ npm install @salesp07/react-native-typewriter

Usage

Pass text and a typing direction into the component to control its animation.

import React, { Component } from "react";
import TypeWriter from "react-native-typewriter";

class TypingText extends Component {
  render() {
    return <TypeWriter typing={1}>Hello World!</TypeWriter>;
  }
}

Documentation

Any props accepted by React Native's Text component are accepted by TypeWriter. These additional props are also accepted:

typing

type: Number default: 0

A value of 1 types text left to right until completion. A value of -1 erases text from right to left. A value of 0 stops the animation.

fixed

type: Boolean default: false

This flag will ensure the enclosing container's size and shape is fixed. Prevents the text from shifting around as it grows into its container.

delay

type: Number default: 100

The delay between each typed token in milliseconds.

delayMap

type: Array[Object] default: none

Adds additional delay to specific characters before the next character is typed.

let delayMap = [
  // increase delay by 100ms at index 4
  { at: 4, delay: 100 },
  // increase delay by 400ms following every '.' character
  { at: ".", delay: 400 },
  // increase delay by 500ms following every instance of "hello!" in the string
  { at: "hello!", delay: 500 },
  // decrease delay by 200ms following every instance of '!?' in the string (`\` is an escape character)
  { at: /!\?/g, delay: -200 },
  // increase delay by 1000ms following every last adjacent punctuation character
  { at: /[.!?:;](?![.!?:;])/g, delay: 1000 },
];

OBS: If you're using a Regular Expression, make sure to include the global flag g, since the code uses matchAll()

initialDelay

type: Number default: 200

The time in milliseconds before the first token is typed.

onTyped

type: Function default: none

A callback called when each token is typed or erased during the animation. The function is called with two arguments: (String token, Number previousVisibleCharacters).

onTypingEnd

type: Function default: none

Called once the typing animation has completed. This callback is not called if props.typing is changed to 0 before the animation completes.

License

Released under the MIT license. See LICENSE for details.