💬 A typing animation for your React Native chat app based on simple trigonometry to create better loaders.
MIT License
requestAnimationFrame
npm install react-native-typing-animation --save
yarn add react-native-typing-animation
import React from "react";
import { TypingAnimation } from "react-native-typing-animation";
class Example extends React.Component {
render() {
return <TypingAnimation />;
}
}
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}
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.5
dotMargin
(Integer) - Dot margin, the space between dots; default is 3
dotAmplitude
(Integer) - Dot amplitude; default is 3
dotSpeed
(Integer) - Dot speed, the speed of the whole animation view; 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
show
(Boolean) - Visibility, whether the whole animation view is displayed or not; default is true
The library works with React Native Web. You can see a working example here and the source code is available here. If you are using create-react-app it might be worth copying the library source files into your app instead of installing it as a dependency to avoid react-native alias issues. See the /example-rn-web
directory for what I mean.
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 :)
requestAnimationFrame
to Animated
with useNativeDriver
(PRs welcome)We use release-it
, to release do the following:
yarn run release:dry
yarn run release