React-native-animatable: Imperative Usage with custom animations

[c-goettert]

In the docs I couldn't find a way to manually trigger custom Animations. In the example describing the imperative usage, it seems that this feature is only supported for the standard-animations. Is there a possibility to mannually trigger custom animantions as well?
I think of something like this:
const fadeIn = { from: { opacity: 0, }, to: { opacity: 1, }, };
() => this.refs.view.animate(fadeIn)
I see that there is transition(fromValues, toValues[[, duration], easing]), but this seems to be different since it doesn't offer a .then() callback. Is there another way of archieving this behaviour?
Another nice feature would be to allow other parameters beside duration for the imperative usage (e.g. () => this.refs.view.bounce(800, {delay: 80, easing: ...})).

[perhapsJohn]

A little late, but I hope this helps.

() => this.refs.view.animate(fadeIn)

You're almost there with this.

A little background, the library attaches functions for each registered animation to the animatable component when it is created with Animatable.createAnimatableComponent. There is no way you can register an animation before it creates the Animatable.View, Animatable.Text, or Animatable.Image. You can, however, register animations before making your own custom components, and call those animations the same way as those provided in the library (or you should be able to). That being said, these functions are really just short cuts.

When you call this.refs.view.bounce(800) it is really just doing this.refs.view.animate('bounce', 800). But since you can't register an animation before the default components are created, named functions for your custom animations won't be available. However, you can still register the animation and then call this.refs.view.animate('myCustomAnimation', 1000).

For reference, imperative usage with the provided and custom registered animations:

import React, { Component } from 'react';
import { Text } from 'react-native';
import * as Animatable from 'react-native-animatable';

// Register Animation
Animatable.initializeRegistryWithDefinitions({
  customFadeIn: { 
    from: { opacity: 0 },
    to: { opacity: 1 }
  },
  customFadeOut: {
    from: { opacity: 1 },
    to: { opacity: 0 }
  }
});

export default class MyComponent extends Component {    
  componentDidMount() {
    this.viewRef.fadeIn(1000)
      .then(() => this.viewRef.fadeOut(1000))
      .then(() => this.viewRef.animate('customFadeIn', 1000))
      .then(() => this.viewRef.animate('customFadeOut', 1000));
  }

  handleRef = ref => this.viewRef = ref;

  render() {    
    return (
        <Animatable.View style={{ opacity: 0 }} ref={this.handleRef}>
          <Text>Imperative Usage with custom animations</Text>
        </Animatable.View>
    );
  }
}

[c-goettert]

Thanks for the reply! This was indeed exactly what is was looking for :)