Via event
We can also run animations via events such as onPress
, onScroll
, onChange
etc.
To do that start with a simple text component without animation object and in onPress
of add animation object to text JSON and then setUi
it.
const animatedText = {
name: 'animated_text',
component: 'text',
value: 'Nano Text',
props:{
style:{
color:'black'
}
},
};
const submitButton = {
component: 'button',
value: 'check',
onPress: ({setUi, getUi}) => {
const animViewObj = getUi('animated_text');
animViewObj['animation']['simple']= {
animation: 'bounce',
iterationCount: 'infinite',
};
setUi('animated_text', animViewObj);
},
};
Activity Indicator example
Loading...
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