react-native-dot-typing

💬 React Native Dot Typing

A dot typing animation for your React Native chat app based on simple trigonometry to create better loaders.

Features

• Smooth movement
• Customizable
• No dependencies
• Fast, lightweight and no images
• Uses requestAnimationFrame

Demo

Installation

• Using npm: npm install react-native-dot-typing --save
• Using Yarn: yarn add react-native-dot-typing

Example

import React from "react";
import { DotTypingAnimation } from "react-native-dot-typing";
 
class Example extends React.Component {
  render() {
    return <DotTypingAnimation />;
  }
}

Advanced Example

import React from "react";
import { TypingAnimation } from "react-native-dot-typing";
 
class Example extends React.Component {
  render() {
    return (
      <DotTypingAnimation
        dotRadius={16}
        dotAmplitude={3}
        dotMargin={32}
        dotX={0}
        dotY={32}
      />
    );
  }
}

Properties

• style (Object) - Container styles; default is {}
• dotColor (String) - Dot color; default is #000 (black)
• dotStyles (Object) - Dot styles; default is {}
• dotRadius (Integer) - Dot radius; default is 2.5
• dotMargin (Integer) - Dot margin, the space between dots; default is 3
• dotAmplitude (Integer) - Dot amplitude; default is 3
• dotSpeed (Integer) - Dot speed, the speed of the whole animation view; default is 0.15
• dotY (Integer) - Dot y, the starting y coordinate; default is 6
• dotX (Integer) - Dot x, the x coordinate of the center dot; default is 12
• show (Boolean) - Visibility, whether the whole animation view is displayed or not; default is true

Acknowledgements

Adrian Carolli (react-native-typing-animation) inspired me to create this project.

License

• MIT