react native typing animation

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 (  <TypingAnimationdotColor="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, 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 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

• MIT

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

• Dennis Murage

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