I've just started learning the Animatable library for React-Native, and cannot figure out how to initiate an animation from a function.
For example, I have:
<Animatable.View animation={custom1}>
<View style={styles.itemOne}>
<Text>Hello World</Text>
</View>
</Animatable.View>
and
const custom1 = {
0: {
scale: 15,
},
1: {
scale: 1,
}
}
Naturally, when the page loads, my "custom1" animation is immediately executed upon the View.
However, what if I don't want the `"custom1" animation to be executed until I 'call it' (rather than on page load)? For example, what if I wanted to do:
function initiateCustom1() {
custom1.animate()
}
How would I accomplish this?
I assumed you're using this library?
If yes, then you can use the ref
prop.
<Animatable.View
animation='zoomInUp'
ref={ref => {
this.sample = ref;
}}
>
<Text>Sample</Text>
</Animatable.View>
And on your touchable or button
onPress={() => {
this.sample.zoomOutDown();
// or
this.sample.zoomOutDown().then(() => {
// do something after animation ends
});
}}