https://github.com/ingenuity-ph/react-native-svg-animations
https://github.com/ingenuity-ph/react-native-svg-animations
animations es6 javascript react react-native svg
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ingenuity-ph/react-native-svg-animations
- Owner: ingenuity-ph
- License: mit
- Created: 2018-01-26T06:18:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-26T07:48:51.000Z (over 7 years ago)
- Last Synced: 2025-06-30T03:42:54.928Z (3 months ago)
- Topics: animations, es6, javascript, react, react-native, svg
- Language: JavaScript
- Size: 1.5 MB
- Stars: 0
- Watchers: 12
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-svg-animations [](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
```
## 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)
* `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)
* `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)
###### 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:
* `ds` - the SVG Paths to be animated, must be an array. (required)
* `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)
* `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)
## TODO
* Accept paths as objects to handle different delays and duration for each of the single path, as well as custom path properties.
* 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
## License
MIT