(web) createAnimatedComponent seems to only work for style prop?

[gre]

following code only renders the initial animated value (0 0) but never gets animated.

class Cursor extends Component {
  render () {
    const { x, y } = this.props.mouse;
    return <p>{x} {y}</p>;
  }
}

const AnimatedCursor = Animated.createAnimatedComponent(Cursor);

export default class Example extends Component {
  state = {
    mouse: new Animated.ValueXY({ x: 0, y: 0 }),
  };

  componentDidMount () {
    window.addEventListener("mousemove", this.onMouseMove);
  }

  onMouseMove = (e: any) => {
    this.state.mouse.setValue({
      x: e.clientX,
      y: e.clientY,
    });
  };

  render() {
    return (
      <AnimatedCursor {...this.state} />
    );
  }
};

however if I rename mouse to style. it works as expected.

class Cursor extends Component {
  render () {
    const { x, y } = this.props.style;
    return <p>{x} {y}</p>;
  }
}

const AnimatedCursor = Animated.createAnimatedComponent(Cursor);

export default class Example extends Component {
  state = {
    style: new Animated.ValueXY({ x: 0, y: 0 }),
  };

  componentDidMount () {
    window.addEventListener("mousemove", this.onMouseMove);
  }

  onMouseMove = (e: any) => {
    this.state.style.setValue({
      x: e.clientX,
      y: e.clientY,
    });
  };

  render() {
    return (
      <AnimatedCursor {...this.state} />
    );
  }
};

[browniefed]

I believe this is because on the web we only have the DOM and hence the style prop we can mutate.
React Native has the setNativeProps call to mutate the native world.

I think the previous solution on the web would call forceUpdate however that's less than ideal of course.

At least that's my understanding of the issue.

[gre]

IMO we shouldn't limit the library to only work for style in the Web implementation.
What's weird in current implementation: the initial value is actually resolved (my mouse animated value is received by the component as a {x, y}, and no longer an animated value) but it is not "listened" for the component to re-render when value changes. (So at least, if the library only want to support style, it should preserve the Animated.Value?)

Maybe there should be an equivalent for setNativeProps on the web, maybe like setAnimatedProps and you would chose to implement it or not (forceUpdate would be by default if method is not available).

The example above was a simple showcase of the bug but my use-case is, I don't actually do things on top of DOM but on top of WebGL, and I would like to trigger a redraw().

[gre]

for instance, in this example: https://gl-react-cookbook.surge.sh/animated

I had to use "style" prop name, any other name would not work. style works, but it's a hack (and "style" isn't even CSS style in my case, but it still works, so I think we should allow any other prop name)

[julienvincent]

I would very much like to see additional prop types supported. I am wanting to use this to animate SVG paths which accept prop names like d={}, cx={}, cy={} etc. Unfortunately the current implementation ignores these props.

Currently getting around this by applying a listener to the animated value, and then calling setState to produce the new value.