A React Native typing animation for your chat app based on simple trigonometry to create better loaders.
npm install react-native-typing-animation

A typing animation for your React Native chat app
based on simple trigonometry to create better loaders.
* Smooth movement
* Customizable
* No dependencies
* Fast, lightweight and no images
* Uses requestAnimationFrame
* Using npm: npm install react-native-typing-animation --save
* Using Yarn: yarn add react-native-typing-animation
``jsx
import React from "react";
import { TypingAnimation } from 'react-native-typing-animation';
class Example extends React.Component {
render() {
return (
);
}
}
`
`jsx
import React from "react";
import { TypingAnimation } from 'react-native-typing-animation';
class Example extends React.Component {
render() {
return (
dotMargin={3}
dotAmplitude={3}
dotSpeed={0.15}
dotRadius={2.5}
dotX={12}
dotY={6}
/>
);
}
}
`
* 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.5dotMargin
* _(Integer)_ - Dot margin, the space between dots; default is 3dotAmplitude
* _(Integer)_ - Dot amplitude; default is 3dotSpeed
* _(Integer)_ - Dot speed; default is 0.15dotY
* _(Integer)_ - Dot y, the starting y coordinate; default is 6dotX
* _(Integer)_ - Dot x, the x coordinate of the center dot; default is 12
* MIT
Feel free to ask me questions on Twitter @icookandcode!
Work is based on the amazing article "How you can use simple Trigonometry to create better loaders" by Nash Vail
Submit a PR to contribute :)
* Move from requestAnimationFrame to Animated with useNativeDriver (PRs welcome)
* Integrate with Gifted Chat
* Unit tests (PRs welcome)
We use release-it, to release do the following:
```
yarn run release:dry
yarn run release