40
GitHub - watadarkstar/react-native-typing-animation: ? A typing animation for yo...
source link: https://github.com/watadarkstar/react-native-typing-animation
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
? 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 is2.5
dotMargin
(Integer) - Dot margin, the space between dots; default is3
dotAmplitude
(Integer) - Dot amplitude; default is3
dotY
(Integer) - Dot y, the starting y coordinate; default is6
dotX
(Integer) - Dot x, the x coordinate of the center dot; default is12
License
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
toAnimated
withuseNativeDriver
(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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK