How to handle animation style properties correctly

[kiroukou]

I needed to use an animatedValue for some fading animation.

The thing is that the animated component like AnimatedView etc have soem kind of magic to detect the animated properties and optimize it (more that a simple forceUpdate say the documentation).

The need is to use these like so :

<AnimatedView style=${[styles.main, {opacity: anim}]}>

So far, I got it working by 2 ways : change the externs from (eg ViewStyleProps) :

?opacity:Float

to

?opacity:haxe.extern.EitherType<Float, react.native.api.Animated.AnimatedValue>,

Or by forcing the update myself :

this.state.anim.addListener(onValueChange);

    function onValueChange(v:{value:Float}) {
        this.forceUpdate();
    }

That would be quite inelegant to change all the props so that they can be defined as animatable, so maybe we can do something else ? (abstract somewhere ?) What's your ideas? @kevinresol @back2dos @zabojad

[kevinresol]

I think AnimatedView should have its own Props instead of using View's one.

[serjek]

here is one way to get it, a bit dirty but it works: here you have both styles inlined <AnimatedView style=${cast ([styles.main, {opacity: anim}]:Array<Dynamic>)}>