0.1.7 • Published 5 years ago

react-native-typing-animation v0.1.7

Weekly downloads
18,709
License
MIT
Repository
github
Last release
5 years ago

Features

  • Smooth movement
  • Customizable
  • No dependencies
  • Fast, lightweight and no images
  • Uses requestAnimationFrame

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

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
rn-gifted-chat-git@ubaids/react-native-gifted-chatreact-native-gifted-chat-ac@gimwee81/react-native-gifted-chat@infinitebrahmanuniverse/nolb-react-native-tyreact-native-gifted-chat-18@everything-registry/sub-chunk-2597ilosamos-react-native-gifted-chathaba-chat-uireact-native-easy-chatreact-native-dialogflow-messengerreact-native-gifted-chatreact-native-gifted-chat-changwoolabreact-native-gifted-chat-do-not-usereact-native-gifted-chat-exporeact-native-gifted-chat-forkreact-native-gifted-chat-forkedreact-native-gifted-chat-honneure-versionreact-native-gifted-chat-liangjsreact-native-gifted-chat-modreact-native-gifted-chat-modern-lovereact-native-gifted-chat-nextreact-native-gifted-chat-poetareact-native-gifted-chat-sharecarereact-native-gifted-chatsreact-nativ-chatreact-native-sparkle-ai-chatreact-native-timeb-chats@dytesdk/mobile@haflinger/react-native-gifted-chat@ignaciofalco/react-native-gifted-chat@imatis/react-native-gifted-chat@jielu/react-native-gifted-chat@kbhardwaj/react-native-gifted-chat@ndl_studio/react-native-gifted-chatsharecare-react-native-gifted-chatrn-matrixreact-native-matrix-uireact-native-mqtt-chat@manishoo/rn-matrix-ui@matoz/react-native-gifted-chat@trava/react-native-gifted-chat@theankur/react-native-gifted-chat@tribecoin/react-native-chat@tridge/react-native-gifted-chat@sharecare/react-native-gifted-chat@platformbuilders/react-native-chatter@raydeck/react-native-gifted-chat@smuxx/react-native-gifted-chat@rn-matrix/ui@starling-tech/react-native-gifted-chat@sunilgorasiya/react-native-gifted-chat@teambuildr/react-native-gifted-chat@aexer/react-native-gifted-chat@anastely/rn-gifted-chat@ahmedfouad2255/react-native-gifted-chat@aloai/alo-chat-react-native@2060.io/react-native-gifted-chat@alaneu/react-native-gifted-chat@beaudinn/react-native-gifted-chat@bravemobile/react-native-gifted-chat@deelzat/react-native-gifted-chat@cookiespam/react-native-gifted-chat@classon/rn-chat-sdk
0.1.7

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.0

5 years ago