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.
import { AnimatedSVGPath } from 'react-native-svg-animations';
...
<View>
<AnimatedSVGPath
strokeColor={"green"}
duration={500}
strokeWidth={10}
height={400}
width={400}
scale={0.75}
delay={100}
d={d}
loop={false}
/>
</View>
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 inms
before starting animation. (defaults to 1000ms or 1s)duration
- time inms
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)
AnimatedSVGPaths
Component to display a multiple animated SVG Paths. See Ingenuity preloader example for the complete implementation.
import { AnimatedSVGPaths } from 'react-native-svg-animations';
...
<View>
<AnimatedSVGPaths
strokeColor={"red"}
strokeWidth={5}
duration={10000}
height={600}
width={600}
scale={0.5}
delay={100}
ds={ds}
/>
</View>
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 inms
before starting animation. (defaults to 1000ms or 1s)duration
- time inms
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
License
MIT