On mount
These are declarative simple animations, that are run on component mount or during events such as onPress, onScroll etc. We can use simple animations to make a text bounce, fade, flash etc for set duration with few more tweaks describing those animations.
For full list of animations checkout react-native-animatable github repo
Here, as an example lets make a text bounce when its mounted.
First lets display a sample text component
const animatedText = {
name: 'animated_text',
component: 'text',
value: 'Hello',
props:{
style:{
color:'black',
}
},
};
Now to make this text bounce on mount, and keep bouncing forever all you have to do is add the below simple
object in the animation object of text component JSON. animation: 'bounce'
is for telling Nano to bounce and iterationCount: 'infinite'
to keep animat
animation:{
simple: {
animation: 'bounce',
iterationCount: 'infinite',
},
}
So the final text component JSON will be
const animatedText = {
name: 'animated_text',
component: 'text',
value: 'Hello',
props:{
style:{
color:'black',
}
},
animation:{
simple: {
animation: 'bounce',
iterationCount: 'infinite',
},
}
};
Activity Indicator example
We can tweak the properties of bounce
animation by using iterationCount
, duration
, delay
, direction
etc. All of these extra properties are available here
Instead of bounce, we can have other animations like fadeIn
, fadeOut
etc. You can see all the animations available here