Quick Start
Nano allows users to create smooth animations and Ui interactions. Animations in Nano are done via animation
object.
Animation object is a simple object where we define declarative animations via simple
key and more advanced animations via advanced
key.
Note : Simple animations use react-native-animatable
and advanced animations use react-native-reanimated
underhood.
const animatedText = {
name: 'text',
component: 'text',
value: 'Nano Text',
props:{
style:{
color:'black'
fontSize:20,
}
},
animation:{
simple: {
...
},
advanced: [
...
],
}
};
Simple
These are declarative simple animations, that are run on component mount or triggers via 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.
To see how simple animations are implemented in Nano checkout Simple Animations
For full list of animations available checkout react-native-animatable github repo
Advanced
advanced
takes array of objects with each object representing a set of animations.
Each object contains two keys runIn
and run
.
Key | Value |
---|---|
runIn | can be |
run | array of individual animations to run in either series or parallel |
For example, animating the style prop fontSize
from 20 to 100 will look like
const animatedText = {
name: 'text',
component: 'text',
value: 'Nano Text',
props:{
style:{
color:'black'
fontSize:20,
}
},
animation:{
advanced: [
{
runIn: 'series',
run: [
{
type: 'timing',
componentProps: {
style: {
fontSize:100,
}
}
}
]
}
]
}
};
We can achieve complex animations wherein some have runIn
as series
and others parallel
by providing multiple objects to the advanced
array.
To learn more about implementing advanced animations with Nano checkout Advanced animations