Changing style values from regular to Animated.Value removes view for several frames

Description

If you have an Animated.View with regular width: 100 style values and want to change it to an Animated.Value instance width: new Animated.Value(100), it removes the view completely from view hierarchy for several frames and mounts again.

Reproducing example

https://snack.expo.io/@terrysahaidak/reanimated-removes-view-bug

Video

https://drive.google.com/file/d/1HIfFt9vWX23lcnZukQSlw1n15-1ZWzcw/view?usp=drivesdk

Explanation

Why you ever want to change some values from animated one to regular? The case I was playing with is lazy value initializations. Since creating a lot of Animated.Value blocks the js thread (see #194) and I have a lot of them on the same screen, I do not initialize them until I start the animation by some event (for example, pressing the button or focusing the input).

[chrfalch]

I’ve investigated this issue and I think I have found the problem.

First of all - this is NOT an Android problem - this is happens on iOS as well (change title, @terrysahaidak ?), it just happens so quickly that it is hard to see it 😃

The problem is evident if you attach a spy function to the message queue and is mostly visible for width/height/flex style properties (or style properties that forces a layout update).

The view is not recreated as we first assumed.

The issue is that when you update the styles the view will receive a call to update its properties through the UIManager updateView function - and the property value for the width/height/flex prop has a null value since the reanimated node has not yet been created. Creating the node happens after the call to updateView, and from there on everything is good.

I’m investigating the possibilities for a fix and will come back 😃

[MasterLambaster]

Is there any updates on this? This is still an issue and makes impossible to have any components that have any animated initial state along side with regular styling.