react-nativereact-native-animatable

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


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?


Solution

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