https://github.com/gapur/react-native-dot-typing

💬 React Native Dot Typing Animation Component
https://github.com/gapur/react-native-dot-typing

animation chat component react react-hook react-native

Last synced: 5 days ago
JSON representation

💬 React Native Dot Typing Animation Component

• Host: GitHub
• URL: https://github.com/gapur/react-native-dot-typing
• Owner: Gapur
• License: mit
• Created: 2020-10-11T16:35:54.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-13T04:55:09.000Z (about 4 years ago)
• Last Synced: 2024-10-08T01:15:28.281Z (about 1 month ago)
• Topics: animation, chat, component, react, react-hook, react-native
• Language: Java
• Homepage:
• Size: 391 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-dot-typing

💬 React Native Dot Typing

A dot 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`

## Demo

![image](example-app.gif)

## Installation

- Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-dot-typing --save`

- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-dot-typing`

## Example

```jsx

import React from "react";

import { DotTypingAnimation } from "react-native-dot-typing";

class Example extends React.Component {

  render() {

    return ;

  }

}

```

## Advanced Example

```jsx

import React from "react";

import { TypingAnimation } from "react-native-dot-typing";

class Example extends React.Component {

  render() {

    return (

      

    );

  }

}

```

## Properties

- **`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`

## Acknowledgements

[Adrian Carolli](https://github.com/watadarkstar) ([react-native-typing-animation](https://github.com/watadarkstar/react-native-typing-animation)) inspired me to create this project.

## License

- [MIT](LICENSE)