# react-native-svg-animations [![npm version](https://badge.fury.io/js/react-native-svg-animations.svg)](https://badge.fury.io/js/react-native-svg-animations) > SVG Animations wrapper for react-native. Based on examples from this project: https://github.com/ethantran/react-native-examples ## Dependencies - `svg-path-properties` - `react-native-svg` ## Installation ``` npm i react-native-svg-animations --save ``` or ``` yarn add react-native-svg-animations ``` ## Demo

AnimatedSVGPath	AnimatedSVGPaths

## Usage This package contains wrapper components for displaying animated SVG in react-native, currently, this contains the following: - AnimatedSVGPath - AnimatedSVGPaths ###### AnimatedSVGPath Component to display a single animated SVG Path. See Hi example for the complete implementation.

```javascript import { AnimatedSVGPath } from "react-native-svg-animations"; ``` ... ```javascript ``` where the properties are: - `d` - the SVG Path to be animated. (required) - `strokeColor` - the color of the path stroke. (defaults to black) - `strokeWidth` - the thickness of the path stroke. (defaults to 1) - `strokeLinecap` - the shape to be used at the end of open subpaths when they are stroked. (defaults to butt) - `strokeDashArray` - the number and length of strokes. (defaults to total length obtained from properties of d) - `height` - the height of the base SVG. (defaults to screen viewport height) - `width` - the width of the base SVG. (defaults to screen viewport width) - `scale` - the scale of the output SVG based on the width and height of the base SVG. (defaults to 1.0 or 100%) - `delay` - time in `ms` before starting animation. (defaults to 1000ms or 1s) - `pause` - time in `ms` to pause at the end of the animation or at the half point of a rewound animation. (defaults 0) - `duration` - time in `ms` to complete the path drawing from starting point to ending point. (defaults to 1000ms or 1s) - `fill` - the color fill of the closed path. (defaults to none) - `loop` - whether the animation loops infinitely. (defaults to true) - `reverse` - Begins drawn and fades as you go . (defaults to false) - `rewind` - the path is rewound when it was complete. (defaults to false) ###### AnimatedSVGPaths Component to display a multiple animated SVG Paths. See Ingenuity preloader example for the complete implementation.

```javascript import { AnimatedSVGPaths } from "react-native-svg-animations"; ``` ... ```javascript ``` where the properties are: - `strokeColor` - the color of the path stroke. (defaults to black) - `strokeWidth` - the thickness of the path stroke. (defaults to 1) - `height` - the height of the base SVG. (defaults to screen viewport height) - `width` - the width of the base SVG. (defaults to screen viewport width) - `scale` - the scale of the output SVG based on the width and height of the base SVG. (defaults to 1.0 or 100%) - `delay` - time in `ms` before starting animation. (defaults to 1000ms or 1s) - `pause` - time in `ms` to pause at the end of the animation or at the half point of a rewound animation. (defaults 0) - `duration` - time in `ms` to complete the path drawing from starting point to ending point. (defaults to 1000ms or 1s) - `fill` - the color fill of the closed path. (defaults to none) - `loop` - whether the animation loops infinitely. (defaults to true) - `reverse` - Begins drawn and fades as you go . (defaults to false) - `rewind` - the path is rewound when it was complete. (defaults to false) - `sequential` - paths start to animate sequentially with the delay between them specified in the `delay` prop, and wait for the last one to finish before a new animation begins. (defaults to false) - `ds` - the SVG Paths to be animated, must be an array; either this or `customSvgProps` is required. - `customSvgProps` - an array of objects to define path properties; other properties will be overwritten by the values defined in these objects; either this or `ds` is required. ```javascript ``` ## TODO - Other animated SVG objects. ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am 'Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request :D ## Contributors Special thanks to these contributors:

_Mr-Bhardwa7	_dimofte	_jvt	_b8ne	_hovlev	_qvick1pro	_{TristanTouchain}
_nitzanbener	_muh-hamada	_benomatis

## License MIT

	Stars	Issues	Version	Updated	Created
react-native-svg	7,221	393	15.1.0	2 months ago	9 years ago
react-native-svg-animations	169	4	1.0.0	3 months ago	6 years ago
react-native-svg-uri			1.2.3	6 years ago	8 years ago

react-native-svg vs react-native-svg-animations vs react-native-svg-uri

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past