Is there a performance loss in reanimated when animating height, width, or any other layout properties?

[swushi]

Hi 👋

I'm wondering if there is a performance loss when animating layout properties such as left, top, height, or width instead of using transform. I'm asking this because with the vanilla Animated API from react-native this is clear. Only some properties are supported by the native driver. I know there are similar concerns on web with CSS.

My question really boils down to.. Which one of these will perform better?

Option A

const A = () => {
  const anim = useSharedValue(0);
  
  const style = useAnimatedStyle(() => ({ height: anim.value }));

  useEffect(() => {   
    anim.value = withTiming(500);
  }, []);

  return <Animated.View style={style} />
}

Option B

const B = () => {
  const anim = useSharedValue(0);
  
  const style = useAnimatedStyle(() => ({ transform: [{ scaleY: anim.value }], height: 500 }));

  useEffect(() => {   
    anim.value = withTiming(500);
  }, []);

  return <Animated.View style={style} />
}

I've started to notice some hitches in my reanimated animations lately, and they are almost exclusively implemented using non-transform properties.

Thanks for all the hardwork on the project, I really love it!

[nandorojo]

My assumption would be yes, simply because a transform/opacity animation lives in isolation and doesn't affect the layout of other elements. I'm not the expert on this, but I would assume transforms are a safer bet on average.

[swushi]

That's my gut reaction as well. I'll plan on creating a benchmark that will provide some clarity on this.

[yoann84]

That's my gut reaction as well. I'll plan on creating a benchmark that will provide some clarity on this.

I'm curious, did you do the benchmark ?
I was planning to use translateY but then if my elements are relative, if I do it on a upper element, I also need to do it on lower elements.

[tomekzaw]

Reanimated splits the animated props into three groups:

• non-layout props, e.g. opacity, backgroundColor, transform
• layout props, e.g. width, height, margin, padding, flex, top, left
• JS props – not related to this topic

When you animate layout props, Reanimated needs to re-calculate the layout of the whole tree on each animation frame, so it's a bit slower than animating only non-layout props.

In some cases, it's possible to avoid layout calculation. For instance, instead of positioning the component relatively using top and left, you can use transform: [ { translateX: left }, { translateY: top } ]. Obviously, this won't affect the position of other components.

[antFrancon]

If this can help someone:
If you absolutely need to animate a layout property such as width or height, use discrete values and then make use of the layout property.

I achieved much better performance with this method when animating the width of a container, for example:

const C: React.FC<{ shrinked: boolean; }> = ({ shrinked, children }) => {
    const animatedStyle = useAnimatedStyle(() => ({
        width: shrinked ? 100 : 250,
     }));

    return (
        <Animated.View style={animatedStyle} layout={LinearTransition}>
            {children}
        </Animated.View>
    );
}

[tomekzaw]

Thanks for the tip, however this actually has a different behavior when you consider more components.

If you animate width and height using useAnimatedStyle, the layout is calculated on each animation frame, so the animated view affects the layout (position and size) of all other components and their width or height might also change (e.g. in flex).

If you use layout={LinearTransition} and just toggle the width, the size of the animated component will animate smoothly, but the layout will be calculated only once and all other components will just change their layout (position and size) immediately, based on the final position.

[antFrancon]

Yes good precision!
I intentionally simplified my example, but in reality, it's a bit more tricky.

Specifically in my case, I needed to consider the following:

• Use position: 'absolute' on the involved component to isolate it from the rest of the layout.
• Animate the width or height of the component in question only if you have no other choice (for example, a TextInput in my case).
• If other components are involved in the desired effect, animate them smoothly and independently using transform or opacity with useAnimatedStyle (I mean these components should be placed outside of the layout-animated component in the tree).

[MatiPl01]

In your case, when you isolate the animated component using position: absolute, animating component's width/height or moving the component using top/left/right/bottom will be still slightly less performant than the usage of transform.

You can see which props are updated directly on the UI thread in this file. All remaining props are updated inside the native thread, which is slightly less performant than updating them directly on the UI thread.

[antFrancon]

Yes of course, hence the If you absolutely need to animate a layout property such as....

I am discussing edge cases here. The most common situation for me is animating the width of a TextInput.
How would you do it using transform ? ScaleX will distort the content so I think in this case I have to use width animation.

[MatiPl01]

Yes, you are right. In such a case you have to animate the width of the TextInput component.