React-rative dot typing animation component
npm install 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.
- Smooth movement
- Customizable
- No dependencies
- Fast, lightweight and no images
- Uses requestAnimationFrame
- Using npm: npm install react-native-dot-typing --save
- Using Yarn: yarn add react-native-dot-typing
``jsx
import React from "react";
import { DotTypingAnimation } from "react-native-dot-typing";
class Example extends React.Component {
render() {
return
}
}
`
`jsx
import React from "react";
import { TypingAnimation } from "react-native-dot-typing";
class Example extends React.Component {
render() {
return (
dotAmplitude={3}
dotMargin={32}
dotX={0}
dotY={32}
/>
);
}
}
`
- 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, the speed of the whole animation view; 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 12show
- _(Boolean)_ - Visibility, whether the whole animation view is displayed or not; default is true`
Adrian Carolli (react-native-typing-animation) inspired me to create this project.
- MIT