Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/watadarkstar/react-native-typing-animation
💬 A typing animation for your React Native chat app based on simple trigonometry to create better loaders.
https://github.com/watadarkstar/react-native-typing-animation
animation chat component react-native
Last synced: 9 days ago
JSON representation
💬 A typing animation for your React Native chat app based on simple trigonometry to create better loaders.
- Host: GitHub
- URL: https://github.com/watadarkstar/react-native-typing-animation
- Owner: watadarkstar
- License: mit
- Created: 2018-12-02T00:37:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:40:35.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T10:17:41.440Z (27 days ago)
- Topics: animation, chat, component, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-typing-animation
- Size: 1.85 MB
- Stars: 286
- Watchers: 5
- Forks: 17
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
💬 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`
- Works with React Native Web
## Installation
- Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-typing-animation --save`
- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-typing-animation`
## Example
```jsx
import React from "react";
import { TypingAnimation } from "react-native-typing-animation";
class Example extends React.Component {
render() {
return ;
}
}
```
## Advanced Example
```jsx
import React from "react";
import { TypingAnimation } from "react-native-typing-animation";
class Example extends React.Component {
render() {
return (
);
}
}
```
## 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 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`
## React Native Web
The library works with React Native Web. You can see a working example [here](https://example-rn-web.adriancaarolli.now.sh/) and the source code is available [here](https://github.com/watadarkstar/react-native-typing-animation/tree/master/example-rn-web). 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.
## License
- [MIT](LICENSE)
## Author
Feel free to ask me questions on Twitter [@icookandcode](https://www.twitter.com/icookandcode)!
## Credits
Work is based on the amazing article ["How you can use simple Trigonometry to create better loaders"](https://uxdesign.cc/how-you-can-use-simple-trigonometry-to-create-better-loaders-32a573577eb4) by Nash Vail
## Contributors
- [Dennis Murage](https://github.com/murageden)
Submit a PR to contribute :)
## Roadmap
- Move from `requestAnimationFrame` to `Animated` with `useNativeDriver` (PRs welcome)
- Integrate with Gifted Chat
- Unit tests (PRs welcome)
## Release
We use `release-it`, to release do the following:
```
yarn run release:dry
yarn run release
```
## Changelog
- Allow animation speed to be configurable
- Allow visibility of the view to be configurable [#22](https://github.com/watadarkstar/react-native-typing-animation/issues/22)