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
Example
import React from "react";import DotTypingAnimation from "react-native-dot-typing"; Component { return <DotTypingAnimation />; }
Advanced Example
import React from "react";import TypingAnimation from "react-native-dot-typing"; Component { return <DotTypingAnimation = = = = = /> ; }
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 is2.5
dotMargin
(Integer) - Dot margin, the space between dots; default is3
dotAmplitude
(Integer) - Dot amplitude; default is3
dotSpeed
(Integer) - Dot speed, the speed of the whole animation view; default is0.15
dotY
(Integer) - Dot y, the starting y coordinate; default is6
dotX
(Integer) - Dot x, the x coordinate of the center dot; default is12
show
(Boolean) - Visibility, whether the whole animation view is displayed or not; default istrue
Acknowledgements
Adrian Carolli (react-native-typing-animation) inspired me to create this project.