Best way to deal with animations affecting the layout

[yolpsoftware]

Let's say we have a list with a few items:

• Item 1
• Item 3
• Item 4

The list is laid out by the standard React Native layout system (Yoga).

Now we want to insert Item 2, between Item 1 and Item 3. The height of Item 2 should grow in an animation, and Item 3 and Item 4 should slide down to their new positions.

Option 1: We insert it in the rendering process, but set its height to 0. Then, we play an animation to make it grow until it reaches its full height. Its height grows gradually, and so the layout engine moves Item 3 and Item 4 gradually down. This works, but it can lead to bad performance, since for every frame, the layout needs to be calculated again.

Option 2: We use a container for Item 2. The container immediately gets full height. Then we use a scaleY animation to animate the content of Item 2 to full height. This works with good performance, but it will make Item 3 and Item 4 jump, because they suddenly get a new position.

Option 3: Same as option 2, but we measure the height of Item 2, and apply a translateY animation to Item 3 and Item 4, to make them slide onto their new position. Works great, but might be very complicated, especially when more than one element is inserted or removed at the same time.

Do we have other options? Are there any good examples that show how to do that?