Skip to content
πŸ’¬ A typing animation for your React Native chat app based on simple trigonometry to create better loaders.
JavaScript Objective-C Python HTML Java CSS
Branch: master
Clone or download
Latest commit 256e721 Aug 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
example-rn-web
example Add dotX and dotY to example Dec 2, 2018
src
.eslintignore setup eslint config Dec 5, 2018
.eslintrc setup eslint config Dec 5, 2018
.gitignore remove the .git file Mar 28, 2019
.release-it.json Set dry run to false Dec 2, 2018
LICENSE
README.md
index.js
package.json
yarn.lock setup eslint config Dec 5, 2018

README.md

example

πŸ’¬ React Native Typing Animation

A typing animation for your React Native chat app
based on simple trigonometry to create better loaders.

npm version build

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 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; 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

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 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
You can’t perform that action at this time.