Registered animations not working on Viro3DObject

[x] Review the documentation: https://docs.viromedia.com/
[x] Search for existing issues: https://github.com/viromedia/viro
[x] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

Development OS: MacOS 10.14.6
Device OS & Version: iOS 12.4 & Android 9.0
Version: ViroReact 2.16.0 and React Native 0.59.8
Device(s): iPhone 8+ and Google Pixel 3

Description

I am attempting to register an animation on a Viro3DObject, but it does not seem to animate. Instead, the object is rendered with the final values from the animation configuration. For example, if my object is defined with an opacity of 0 and an animation that changes that opacity to 1, then the object is immediately rendered with an opacity of 1. This tells me that the animation is linked correctly.

I've tried applying animations directly to my object and also to a ViroNode wrapping my object as suggested in https://github.com/viromedia/viro/issues/248#issuecomment-385126647. Neither approach works.

Reproducible Demo

Here is a code sample. Note that I've added console logs at the beginning and end of the animations. The datestamps appear in my console logs and confirm that the animation has been triggered and lasts for approx 5 seconds.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { ViroAnimations, ViroNode, Viro3DObject } from 'react-viro';

ViroAnimations.registerAnimations({
  animation01: {
    properties: {
      opacity: 0.8,
      positionZ: -2.0,
    },
    easing: 'Linear',
    duration: 5000,
  },
});

const model = require('assets/model.vrx');

export default class Model extends Component {
  constructor(props) {
    super(props);

    this.state = {
      position: null,
    };
  }

  render() {
    return (
      // <ViroNode
      //   opacity={0}
      //   position={[0, -3, -10]} // we place the object in front of us (z = -1)
      //   rotation={[270, 0, 0]}
      //   onError={(e) => console.log('Error error error:', e.nativeEvent.error)}
      //   animation={{
      //     name: 'animation01',
      //     run: true,
      //     onStart: () => {
      //       console.log(`Animation starting: ${new Date().getTime()}`);
      //     },
      //     onFinish: () => {
      //       console.log(`Animation ending: ${new Date().getTime()}`);
      //     },
      //   }}
      // >
      //   <Viro3DObject type="VRX" source={model} scale={[0.02, 0.02, 0.02]} />
      // </ViroNode>
      <Viro3DObject
        type="VRX"
        source={model}
        scale={[0.02, 0.02, 0.02]}
        opacity={0}
        position={[0, -3, -10]} // we place the object in front of us (z = -1)
        rotation={[270, 0, 0]}
        onError={(e) => console.log('Error error error:', e.nativeEvent.error)}
        animation={{
          name: 'animation01',
          run: true,
          onStart: () => {
            console.log(`Animation starting: ${new Date().getTime()}`);
          },
          onFinish: () => {
            console.log(`Animation ending: ${new Date().getTime()}`);
          },
        }}
      />
    );
  }
}

I'm hoping I've just dotted a t or crossed an i. Any help would be greatly appreciated. And, please let me know if I can provide any additional information.

viromedia / viro