Hey devs. I have been talking about some animations in reactJS, so now it’s time to talk about some animations in react native. This library I will be talking about today, is one of my favourite. It’s easy to use and understand and it can be useful when you don’t want your app to be boring. Let’s see how to use it!
The library I will use in this article is: react-native-animations-svg. This library animates svg files, as you can understand from its name.
Before we start doing anything, we have to install the library:
npm i react-native-animations-svg
As soon as we do that, we have to make sure we have an svg file. If you already have one, you can continue this article, otherwise make sure to have one!
In order to use it in our project, we have to import it in our file:
import { AnimatedSVGPath } from 'react-native-svg-animations';Now, we will start to code inside the return of our function.
<View>
<AnimatedSVGPath
strokeColor={"green"}
duration={500}
strokeWidth={10}
strokeDashArray = {[42.76482137044271, 42.76482137044271]}
height={400}
width={400}
scale={0.75}
delay={100}
d={d}
loop={false}
/>
</View>Most of the props used in this example are easy to understand:
- loop: if we want the animation to be done more than once
- d: the svg that we want to animate
- delay: time before the animation starts
- strokeDashArray: the number and length of strokes.
- strokeWidth: the thickness of the path stroke
- duration: how long the animation should last
There is also the possibility to have the library draw more than one path at the time, the only difference is the import and some props:
import { AnimatedSVGPaths } from 'react-native-svg-animations';This is the new import and the inly difference in the code is that instead of “d” we are going to have “ds” which requires an array of svgs.
Hope you liked this article and it was helpful. Let me know what you think in the comments!
