luqmanrom / react-native-typing-animation

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

💬 React Native Typing Animation

A 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

Installation

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

Example

import React from "react";
import { TypingAnimation } from 'react-native-typing-animation';

class Example extends React.Component {
  render() {
    return (
      <TypingAnimation />
    );
  }
}

Advanced Example

import React from "react";
import { TypingAnimation } from 'react-native-typing-animation';

class Example extends React.Component {
  render() {
    return (
      <TypingAnimation 
        dotColor="black"
        dotMargin={3}
        dotAmplitude={3}
        dotRadius={2.5}
        dotX={12}
        dotY={6}
      />
    );
  }
}

Props

• 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
• 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

License

• MIT

Author

Feel free to ask me questions on Twitter @icookandcode!

Credits

Work is based on the amazing article "How you can use simple Trigonometry to create better loaders" by Nash Vail

Contributors

Submit a PR to contribute :)

Roadmap

• Move from requestAnimationFrame to Animated with useNativeDriver (PRs welcome)
• Integrate with Gifted Chat
• Allow animation speed to be configurable (PRs welcome)
• Unit tests (PRs welcome)

Release

We use release-it, to release do the following:

yarn run release:dry
yarn run release

Changelog

TODO