React-native-type-animation NPM

Installation

npm install react-native-type-animation

Or, if you prefer yarn:

yarn add react-native-type-animation

Documentation

The docs can be found here: https://docs.benjamineruvieru.com/react-native-type-animation

Usage

import { TypeAnimation } from 'react-native-type-animation';

const MyComponent = () => {
  return (
    <TypeAnimation
      sequence={[
        { text: 'One' },
        { text: 'One Two' },
        {
          action: () => {
            console.log('Finished first two sequences');
          },
        },
        { text: 'One Two Three' },
        { text: 'One Two' },
        { text: 'One' },
      ]}
      loop
      style={{
        color: 'white',
        backgroundColor: 'green',
        fontSize: 30,
      }}
    />
  );
};

export default MyComponent;

Props

The following props allows you to configure the properties for the type animation component. It allows you to define an animation sequence, control the speed and behavior of the animation, and customize the appearance of the cursor.

Prop	Required	Type	Default	Description
`blinkSpeed`	no	Number	500	The speed at which the cursor blinks (in milliseconds).
`cursor`	no	Boolean	true	Whether to display the cursor.
`cursorStyle`	no	TextStyle		Additional styles for the cursor.
`delayBetweenSequence`	no	Number	100	Delay between animation sequences (in milliseconds).
`direction`	no	String	front	Specifies the direction in which to perform the typing/deleting animation. It accepts two possible values: 'front' and 'back'.
`initialDelay`	no	Number	0	The delay before the animation begins (in milliseconds).
`loop`	no	Boolean	false	Whether to loop the typing animation indefinitely.
`preRenderText`	no	String	None	Specifies the initial text to display.
`repeat`	no	Number	1	The number of times to repeat the sequence.
`sequence`	yes	Array		An array of objects defining the text to be typed and animation options.
`splitter`	no	Function		A function to split text into individual characters or chunks for typing.

`sequence` Array

The sequence prop is an array of objects, where each object defines a part of the animation sequence. It can contain the following properties:

action: A function to execute as part of the sequence. This can be used as a callback to perform actions during the animation.
text: The text to display or type in the sequence.
delayBetweenSequence: The delay between the current sequence (in milliseconds) and the next. The default is 100, but you can specify a custom value for individual sequences.
deleteCount: The number of characters to delete before typing (backspacing).
deletionSpeed: The speed at which characters are deleted (backspace speed, in milliseconds). The default is 100, but you can specify a custom value for individual sequences.
typeSpeed: The speed at which characters are typed (typing speed, in milliseconds). The default is 100, but you can specify a custom value for individual sequences.

`direction` String

The direction prop specifies the direction in which to perform the typing/deleting animation. It accepts two possible values: 'front' and 'back'.

`splitter` Function

The splitter prop is a function that can be used to split text into individual characters or chunks for typing. This allows you to control how the text is broken down during the animation.

`repeat` Number

The repeat prop determines how many times the entire animation sequence should be repeated. The default is 1, meaning the sequence is played once.

`loop` Boolean

The loop prop, when set to true, causes the typing animation to loop indefinitely. If set to false (the default), the animation will play only once.

`blinkSpeed` Number

The blinkSpeed prop controls the speed at which the cursor blinks. The default is 500 milliseconds, but you can adjust this value as needed.

`style` TextStyle

The style prop allows you to provide additional styles for the typewriter animation container. You can customize the appearance of the entire animation component using this prop.

`cursorStyle` TextStyle

The cursorStyle prop is used to apply additional styles to the cursor element. This lets you customize the appearance of the cursor, such as its color and size.

`cursor` Boolean

The cursor prop determines whether the cursor is displayed during the animation. By default, it is set to true, but you can set it to false if you don't want to display the cursor.

Note: When using the sequence prop, you can define complex typing animations with different text, delays, and actions. Each object in the sequence array represents a step in the animation.

Example usage of TypeAnimationProps:

const animationProps = {
  sequence: [
    { text: 'Hello, ', typeSpeed: 100 },
    { text: 'World!', typeSpeed: 150, delayBetweenSequence: 500 },
  ],
  delayBetweenSequence: 200,
  repeat: 2,
  blinkSpeed: 400,
  cursorStyle: { color: 'red' },
};

const animationProps = {
  sequence: [
    { text: 'Hello World!', typeSpeed: 100 },
    { text: 'Hola World!', typeSpeed: 150, delayBetweenSequence: 500 },
  ],
  delayBetweenSequence: 200,
  loop: true,
  blinkSpeed: 400,
  cursorStyle: { color: 'red' },
  direction: 'back',
};