# @hestabit/react-native-svg-animate

> Animate SVG path with diffrent animation types in both Android and IOS Application.

Latest version **0.0.4** (published 2019-06-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install @hestabit/react-native-svg-animate
pnpm add @hestabit/react-native-svg-animate
yarn add @hestabit/react-native-svg-animate
bun add @hestabit/react-native-svg-animate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-06-20 |
| First published | 2019-06-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.12.0 |
| Dependencies | 2 |
| Unpacked size | 555.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Hestabit |
| Maintainers | mr-bhardwa7, prashant_gautam |
| Keywords | react-native, animation, svg, svg-path, svg-animate |

## Links

- npm: https://www.npmjs.com/package/@hestabit/react-native-svg-animate
- Repository: https://github.com/Hestabit/react-native-svg-animate
- Homepage: https://github.com/Hestabit/react-native-svg-animate#readme
- Issues: https://github.com/Hestabit/react-native-svg-animate/issues
- npm.io page: https://npm.io/package/@hestabit/react-native-svg-animate

## Dependencies (2)

- [color](https://npm.io/package/color.md) ^3.1.2
- [svg-path-properties](https://npm.io/package/svg-path-properties.md) ^0.4.9

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2019-06-20
- 0.0.3 — 2019-06-19
- 0.0.2 — 2019-06-19
- 0.0.1 — 2019-06-19

## README

# React Native SVG Animate
![](https://img.shields.io/badge/platform-react--native-brightgreen.svg) ![](https://img.shields.io/static/v1.svg?label=license&message=ISC&color=blue)
> This package allow you to animate SVG path with diffrent animation types in both Android and IOS Application. 
Package is extended version of [react-native-svg-animations](https://www.npmjs.com/package/react-native-svg-animations)

### Dependencies
* `color`
* `react-native-svg`
* `svg-path-properties` 
### Installation
```
$ npm i @hestabit/react-native-svg-animate
```
#### Install peer dependency
```
$ npm i react-native-svg 
$ react-native link react-native-svg
```

### Showcase
Async        |   Delayed       |  One By One
:-----------:|:---------------:|:-----------:
![Async-bounce](https://github.com/Mr-Bhardwa7/react-native-svg-animate/blob/master/assets/images/async-bounce.gif?raw=true) | ![Delayed-bounce](https://github.com/Mr-Bhardwa7/react-native-svg-animate/blob/master/assets/images/delayed-bounce.gif?raw=true) | ![OneByOne-bounce](https://github.com/Mr-Bhardwa7/react-native-svg-animate/blob/master/assets/images/oneByOne-bounce.gif?raw=true)

### Animation

On the following images, the pink color represents the duration value, and the blue one is for delay value.

##### Async
![Async](https://github.com/Mr-Bhardwa7/react-native-svg-animate/blob/master/assets/images/async.jpg?raw=true)

Each line is drawn asynchronously. They all start and finish at the same time, hence the name async.

##### Delayed
![Delayed](https://github.com/Mr-Bhardwa7/react-native-svg-animate/blob/master/assets/images/delayed.png?raw=true)

Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.

##### One By One
![One_By_ONE](https://github.com/Mr-Bhardwa7/react-native-svg-animate/blob/master/assets/images/one_by_one.jpg?raw=true)

Each path element is drawn one after the other. This animation gives the best impression of live drawing. The duration for each line depends on their length to make a constant drawing speed.

### USAGE
```javascript
import { AnimateSVG } from '@hestabit/react-native-svg-animate'
```
```JSX
 <AnimateSVG
    strokeWidth={3}
    duration={4000}
    height={220}
    scale={1}
    width={220}
    d={design_1}
    viewBox={"0 0 512 512"}
    type={"one_by_one"}
    animEffect={"bounce"}
    ref={ref => (this._animateSVG = ref)}
/>
```

```JSX
<Button title="Replay" onPress={()=> this._animateSVG.replay()} />
<Button title="Rewind" onPress={()=> this._animateSVG.rewind()} />
```

### Option list

Name        |   Type       |  Description                       | Default Value
:-----------|:-------------|:-----------------------------------|:------------
strokeColor |  string      | The color of the path stroke.    | black
strokeWidth |  number      | The thickness of the path stroke. | 1
duration    |  number      | Time in ms to complete the path drawing from starting point to ending point.  | 1000ms or 1s
delay       |  number      | Time in ms before starting animation. | null
height      |  number      | The height of the base SVG. | screen viewport height
width       | number       | The width of the base SVG. | screen viewport width
scale       |  number      | The scale of the output SVG based on the width and height of the base SVG. | 1.0 or 100%
fill        | string       | The color fill of the closed path. | none
loop        | bool         | Whether the animation loops infinitely. | false
viewBox     |  string      | Control the viewBox by adding the attribute viewBox to the svg element.| null
style       | object       | You can use the style property to add the styles inline. | {}
type        | string       | Type of animation, Package can animate SVG in one of these type. [`async`, `delayed`, `one_by_one`]  | async
d           | string/array | The SVG Path to be animated. (`required`) It can be `single path` as string or `multiple path` as an array of string. | -
animEffect  | string       | Defines what kind of easing effect will be used: [`linear`, `ease_in`, `ease_out`, `back`, `bounce`, `elastic`]   | linear

### Methods

Name        |  Description 
:-----------:|:-------------:
replay()    | Restart the animation.
rewind()    | Play the animation in reverse mode.

---
_Source: https://npm.io/package/@hestabit/react-native-svg-animate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._