How to animate prop transform for svg with React-Native and Reanimated 2

Question

import React, { FC } from "react";
import { G } from "react-native-svg";
import Animated, { useAnimatedProps, useDerivedValue, withSpring } from "react-native-reanimated";
import { CanvasControlledValuesProps } from "./helpers/types";
import { Candle } from "./Candle";
import { CANDLE_WIDTH } from "../../constants/sizes";

const AnimatedGroup = Animated.createAnimatedComponent(G);

export const Canvas: FC<CanvasControlledValuesProps> = ({
    scaleY,
    scaleX,
    translateX,
    offsetByY,
    data,
    initialDomain,
}) => {
    const props = useAnimatedProps(() => {
        return {
            x: withSpring(translateX.value, {
                damping: 20,
                stiffness: 90,
            }),
            y: withSpring(offsetByY.value, {
                damping: 20,
                stiffness: 90,
            }),
            transform: { scale: [scaleX.value, scaleY.value] },
        };
    });

    return (
        <AnimatedGroup animatedProps={props}>
            {data.map((candle, index) => (
                <Candle key={index} width={CANDLE_WIDTH} {...{ candle, index }} domain={initialDomain} />
            ))}
        </AnimatedGroup>
    );
};

Good day! I need to increase or decrease the content of the AnimatedGroup, so I decided to use G but there was a problem: the scale is not applied for the AnimatedGroup, why it's like that? I have not used Aniamted.View since the quality of the Svg content, inside which the AnimatedGroup is located, will be lost.

score 0 · Answer 1 · answered Aug 27 '21 at 19:26

const style = useAnimatedStyle(() => {
    return {
        transform: [
            {
                translateX: offsetByX.value,
            },
            {
                translateX: withSpring(translateX.value, springConfig),
            },
            {
                translateY: withSpring(adaptation.value.offsetByY, springConfig),
            },
            {
                scaleX: scaleX.value,
            },
            {
                scaleY: withSpring(adaptation.value.scaleY, springConfig),
            },
        ],
    };
});

return (
    <AnimatedGroup style={style}>
        {data.map((candle, index) => (
            <Candle key={index} width={CANDLE_WIDTH} {...{ candle, index }} domain={initialDomain} />
        ))}
    </AnimatedGroup>
);

The solution is to add animated styles for the Animated Group. Or you can use the matrix property like this:

const props = useAnimatedProps(() => {
    return {
        x: withSpring(translateX.value, {
            damping: 20,
            stiffness: 90,
        }),
        y: withSpring(offsetByY.value, {
            damping: 20,
            stiffness: 90,
        }),
        matrix: [scaleX.value, 0, 0, scaleY.value, 0, 0],
    };
});

You can read about the work of matrix here https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

How to animate prop transform for svg with React-Native and Reanimated 2

1 Answers1