react-native-typing-animation

💬 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

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

class Example extends React.Component {
render() {
return (

);
}
}
`

Advanced Example

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

class Example extends React.Component {
render() {
return (
dotColor="black"
dotMargin={3}
dotAmplitude={3}
dotSpeed={0.15}
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
* dotSpeed _(Integer)_ - Dot speed; 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

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

* Dennis Murage

Submit a PR to contribute :)

Roadmap

* Move from requestAnimationFrame to Animated with useNativeDriver (PRs welcome)
* Integrate with Gifted Chat
* Unit tests (PRs welcome)

Release

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

`
yarn run release:dry
yarn run release
``

Changelog

* Allow animation speed to be configurable