How to initiate a React-Native-Animatable animation from a function?

Question

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?

score 1 · Accepted Answer · answered Jul 01 '20 at 06:05

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
  });
}}

How to initiate a React-Native-Animatable animation from a function?

1 Answers1