watadarkstar / React Native Typing Animation
Licence: mit
💬 A typing animation for your React Native chat app based on simple trigonometry to create better loaders.
Stars: ✭ 211
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Typing Animation
React Native Gifted Chat
💬 The most complete chat UI for React Native
Stars: ✭ 11,339 (+5273.93%)
Mutual labels: chat, component
React Reorder
Drag & drop, touch enabled, reorderable / sortable list, React component
Stars: ✭ 209 (-0.95%)
Mutual labels: component
Navigation Stack
NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Stars: ✭ 2,289 (+984.83%)
Mutual labels: component
Zulip
Zulip server and web app—powerful open source team chat
Stars: ✭ 14,815 (+6921.33%)
Mutual labels: chat
React Native Immutable List View
📜 Drop-in replacement for ListView, FlatList, and VirtualizedList.
Stars: ✭ 206 (-2.37%)
Mutual labels: component
Rdvcalendarview
Highly customizable calendarView and calendarViewController for iOS
Stars: ✭ 203 (-3.79%)
Mutual labels: component
Browser Kit
The BrowserKit component simulates the behavior of a web browser, allowing you to make requests, click on links and submit forms programmatically.
Stars: ✭ 2,563 (+1114.69%)
Mutual labels: component
Vue Easytable
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...
Stars: ✭ 2,501 (+1085.31%)
Mutual labels: component
Venom
Venom is the most complete javascript library for Whatsapp, 100% Open Source.
Stars: ✭ 3,457 (+1538.39%)
Mutual labels: chat
React Discord Clone
Discord Clone using React, Node, Express, Socket-IO and Mysql
Stars: ✭ 198 (-6.16%)
Mutual labels: chat
React Instagram Embed
React embedding Instagram posts component
Stars: ✭ 209 (-0.95%)
Mutual labels: component
Babel Plugin React Intl Auto
i18n for the component age. Auto management react-intl ID.
Stars: ✭ 203 (-3.79%)
Mutual labels: component
Skillbox Chat
Skillbox demo application for the Python course
Stars: ✭ 86 (-59.24%)
Mutual labels: chat
React Polymorphic Box
Building blocks for strongly typed polymorphic components in React.
Stars: ✭ 206 (-2.37%)
Mutual labels: component
React Native Action Button
customizable multi-action-button component for react-native
Stars: ✭ 2,408 (+1041.23%)
Mutual labels: component
💬 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:
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}
dotSpeed={0.15}
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
-
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
React Native Web
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.
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
- 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].