Animating viewBox with react-native-svg

[Andarius]

Hey !
I'm trying to implement a zoom feature on a line chart using react-native-svg.
I'm not sure what the best option is, but I was looking into updating the viewBox prop to try emulating the zoom.
However, this code does not seem to have any effect:

const AnimatedSvg = Animated.createAnimatedComponent(Svg)

 const animatedSvgProps = useAnimatedProps<SvgProps>(() => {
        return {
            viewBox: `${translateX.value} 0 ${animatedWidth.value * scale.value} ${animatedHeight.value}`
        }
    })
<AnimatedSvg animatedProps={animatedSvgProps} />

Any ideas on why it's not updating here ?
It works if a re-render happens

[ericcAtGitHub]

#3060 (comment)

[MatiPl01]

The right way to do this is to use the Group component from react-native-svg, wrap the chart within this component (likely the Path component you use to create a chart) and animate it using the transform property using the useAnimatedProps hook.

[Andarius]

For the record I implemented it like this at the time :

[MatiPl01]

Thanks for your response. For this way of zooming chart, where you want the height to be unchanged and just expand plot in the x axis, your solution is better than just animating the transform property.