How to merge return of useAnimatedStyles?

[Michota]

Hello!

I would like to know if I can combine two animatedStyles into one? For this moment, the current solution will apply only one of styles that are being passed as style prop.

export function Component(props) {
  const animatedStylesOne = useAnimatedStyle(() => ({
    transform: [{ rotateZ: `${rotationDegree.value}deg` }],
  }));

  const animatedStylesTwo = useAnimatedStyle(() => ({
    transform: [{ scale: scaleValue.value }],
  }));

  return (
    <AnimatedPressable style={[animatedStylesOne, animatedStylesTwo]}>
      {...}
    </AnimatedPressable>
  );
}

I know that I could use more objects in useAnimatedStyles transform property, (e.g. transform: [{ rotateZ: ${rotationDegree.value}deg }, {scale: scaleValue.value}]) but I am using hooks to retrieve these a little bit more complicated animatedStyles...

[MatiPl01]

Hey!

There is currently no way to combine styles from the transform property. This is quite rare use case and for now we suggest adding animated styles with transforms to separate views if possible.

If you can, please change your code to include all transforms in a single animated style or apply these
animated styles to separate components, such as:

export function Component(props) {
  const animatedStylesOne = useAnimatedStyle(() => ({
    transform: [{ rotateZ: `${rotationDegree.value}deg` }],
  }));

  const animatedStylesTwo = useAnimatedStyle(() => ({
    transform: [{ scale: scaleValue.value }],
  }));

  return (
    <Animated.View style={animatedStylesOne}>
      <AnimatedPressable style={animatedStylesTwo}>
        {...}
      </AnimatedPressable>
    </Animated.View>
  );
}