Animating viewBox with react-native-svg

[jeffbonasso-ambifi]

Discussed in https://github.com/software-mansion/react-native-reanimated/discussions/2181

^{Originally posted by Andarius July 6, 2021} 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

I am trying to do that exact same thing. This article shows animating a viewBox on web and trying to achieve the same...

https://www.motiontricks.com/basic-svg-viewbox-animation/

If you scroll down to Final Result you will see it in action.

I understand it can be pulled off with style transform, but it is much harder. Animating the viewBox has many benefits compared to figuring out the math for using a transform style.

I started with something simple, just trying to move the viewBox...

.
.
.

const viewBoxX = useSharedValue(0);

// On component mount run animation
useEffect(() => {
  viewBoxX.value = withTiming(1000, {
      duration: 2500,
      easing: Easing.bezier(0.25, 0.1, 0.25, 1)
  });
},[]);

.
.
.

const animatedProps = useAnimatedProps(() => {
   return {
      viewBox: `${viewBoxX.value} 0 1600 767`,
   };
});

.
.
.

// animatedProps should be the viewBox
<AnimatedSvg animatedProps={animatedProps} width={windowWidth} height={windowHeight / aspectRatio} preserveAspectRatio="xMidYMid meet">
  <SvgImage
  href={{uri: imageSource.uri }}
  />	
</AnimatedSvg>

Has anyone figured out how to animate the viewBox property in react-native-svg using reanimated2?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Snack or minimal code example, Package versions and Affected platforms sections.

[iGroza]

same question +1

[theonetheycallneo]

same question +1

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[Latropos]

Hi! You may try using some dedicated libraries to make svg zoom like this one: https://github.com/garblovians/react-native-svg-pan-zoom