Animate a Reanimated Animated.View from zero width to flex fill smoothly

Question

I have a react-native-reanimated View that is zero width when flex: 0 and fills available width when flex: 1.

I want to animate the transition smoothly, making the view animate from 0 width to fill availabla width dynamically, while also animating any elements as it grows:

[#1 first elem] -- [#2 elem i want to grow] -- [#3 elem that should be pushed animated because #2 grows animated]

In my initial view, as #2 has zero width, it looks like [#1] -- [#3]. I want to animate flex of #2 from 0 to 1, but it animates immediately to full width instead of smoothly animating. I can imagine why this happens (as flex is relative, there is no difference between non-zero values as long as it's the only flex-filling element) but don't know how to solve it.

Given that:

• The full width of my animating element is dynamic
• The elements after the animating element also need to be pushed animated in the layout

How can I animate a Reanimated View to grow in size and animatedly push any elements after it in the layout?

I'm using Reanimated 3.4.1.

Answer 1

I've ended up measuring container view, first element (the one before the animated/growing), last element (the one after the animated/growing) on layout, calculated available space (container - first element's width - last element's width - any paddings etc) and animated the width of the element to that value.