When we use react-native-reanimated to animate properties like translateX, scale or opacity, react-native-reanimated runs the animation on the "native" UI thread. These properties don't affect the layout engine, so we can complete the layout on the Main Thread (JS), pass the values over the bridge to the UI thread, and then animate the stuff without involvement of the layout engine.
However, when properties like height, padding or margin are animated, this is not so clear. These properties affect the layout, and we need to update the layout when the properties change. But the layout is done by the Main Thread in Javascript. If the layout engine had to be active at every frame, because the height or the padding has changed, it would surely hit performance hard.
And indeed, I'm currently having massive performance problems when animating padding. The profiler tells me that the performance problems come from the bridge. It seems that the UI thread calls back to Javascript every frame, maybe to get the layout updated by the Main Thread, and then the layout gets passed over the bridge again to native.
However, react-native-reanimated offers the example widthandheight/index.js, which clearly animates properties like width, height and fontSize that have an effect on the layout. This example runs smoothly at 60fps.
How does react-native-reanimated handle animations which have an effect on the layout? Is there a layout process at the start and at the end of the animation, and in between it's only UI thread (this sounds like the experimental Transitions feature, but I'm not talking about Transitions). Is there some special recipe to be followed in order to get good performance?
EDIT: In the meantime, I have learned that some of these assumptions are false. The React Native layout is not done on the Javascript thread, but on the native UI thread. So, in principle, there should not be calls over the bridge when animating padding, width and margin. My performance problems maybe stem from the fact that my layout is too complex to be updated at 60 fps.
