For some reason, changing the style of an Animated.View doesn't change the animation.

I am using this.root.setNativeProps({ style : ... }) on an Animated.View, but it doesn't start or stop any specified animation.

Only the original contents of the Animated.View's style= attribute are ever animated.

How can I add an animated property conditionally?

In my case, I want to animate while the component is being held down and turn off the animation when it is released, so I created this kind of component:

import React from 'react'
import { Animated } from 'react-native'

class PressableView extends React.Component {
  setStyles = (styles) => {
    this.root.setNativeProps({
      style: styles,
    })
  }

  render() {
    const { activeStyle, style, onPressIn, onPressOut, ...passThrough } = this.props
    return (
      <Animated.View
        ref={(component) => { this.root = component }}
        onStartShouldSetResponder={() => true}
        onResponderStart={
          (...args) => {
            this.setStyles(activeStyle)
            onPressIn(...args)
          }
        }
        onResponderRelease={
          (...args) => {
            this.setStyles(style)
            onPressOut(...args)
          }
        }
        style={style}
        {...passThrough}
      />
    )
  }
}

export default PressableView

and I use it like this

<PressableView
  style={[
    styles.button,
    {
      background: color,
      width: this.state.width,
      height: this.state.width,
    }
  ]}
  activeStyle={[
    styles.button_active,
    {
      background: darken(color, 0.1),
      width: this.state.width,
      height: this.state.width,
      transform: [{ scale: anim.current }]
    }
  ]}
  onPressIn={() => {}}
  onPressOut={() => {}}
/>

Everything works, the mouse/touch down and mouse up events are responded to, all styles from activeStyle are applied except the animated one. The animation does not begin.

If I move that style to the regular style= attribute:

<PressableView
  style={[
    styles.button,
    {
      background: color,
      width: this.state.width,
      height: this.state.width,
      transform: [{ scale: anim.current }]
    }
  ]}
  activeStyle={[
    styles.button_active,
    {
      background: darken(color, 0.1),
      width: this.state.width,
      height: this.state.width
    }
  ]}
  onPressIn={() => {}}
  onPressOut={() => {}}
/>

Then the animation plays totally correctly... forever.

It looks like this.root.setNativeProps({ style }) isn't changing what the animation does at all.

How can I actually turn on and off an animation?