Por alguna razón, cambiar el estilo de Animated.View no cambia la animación.

Estoy usando this.root.setNativeProps({ style : ... }) en una Animated.View , pero no inicia ni detiene ninguna animación específica.

Solo se animan los contenidos originales del atributo style= de Animated.View .

¿Cómo puedo agregar una propiedad animada condicionalmente?

En mi caso, quiero animar mientras se mantiene presionado el componente y apagar la animación cuando se suelta, así que creé este tipo de componente:

 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

y lo uso asi

 <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={() => {}} />

Todo funciona, se responde a los eventos mouse/touch down y mouse up, se aplican todos los estilos de activeStyle excepto el animado. La animación no comienza.

Si muevo ese estilo al atributo regular style= :

 <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={() => {}} />

Entonces la animación se reproduce de forma totalmente correcta... para siempre.

Parece que this.root.setNativeProps({ style }) no cambia en absoluto lo que hace la animación.

¿Cómo puedo activar y desactivar una animación?