Can I pass animatedProps to a component and transform them in the component?

[SitkaCharley]

I want to create a component that accept one or more animated variables in a animatedProps object. It will transform these variables getting them from animatedProps to another variables in a new animatedProps object. I need that transformation because the animated component that will take the new animatedProps has another prop types. For example I have the following Test component that accepts 'radius' property. I want that 'animatedProps.radius' to animated 'r' property of 'AnimatedCircle':

import Svg, { Circle, CircleProps } from 'react-native-svg';
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

type Props = {
  radius: number,
  backgroundColor: string,
  animatedProps?: { radius: number};
}

const Test = ({radius, backgroundColor}: Props) => {
  /* How to get radius from animatedProps so that I can create another
  animated props object?*/
  const circleAnimatedProps = useAnimatedProps(() => {
      return {
         r: animatedProps.radius // something like this, but should update 'r' property in real time
      }
  });
  return (
    <Svg style={StyleSheet.absoluteFill}>
      <AnimatedCircle 
        // ref={ref} 
        cx={radius} 
        cy={radius} 
        r={radius} 
        fill={backgroundColor} 
        animatedProps={circleAnimatedProps}
      />
    </Svg>
  )
}

[MatiPl01]

Hey @SitkaCharley!

In general, you cannot modify animatedProps or animated style. In fact, useAnimatedStyle and useAnimatedProps hooks return the same object and, in both cases, the returned value cannot be modified.

The proper way to do this is to pass the Shared Value via props to another component. In your case, you should pass radius as a Shared Value and use this Shared Value within the useAnimatedProps hook.

[SitkaCharley]

Hey @MatiPl01!

Thanks for your reply. Following you sugestions I ended up with this:

import Svg, { Circle, CircleProps } from 'react-native-svg';
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

type Props = {
  radius: number,
  backgroundColor: string,
  animatedProps?: { radius: SharedValue<number>};
}

const Test = ({radius, backgroundColor}: Props) => {
  const circleAnimatedProps = animatedProps ? useAnimatedProps(() => {
      return {
         r: animatedProps.radius.value
      }
  }) : {};

  return (
    <Svg style={StyleSheet.absoluteFill}>
      <AnimatedCircle 
        // ref={ref} 
        cx={radius} 
        cy={radius} 
        r={radius} 
        fill={backgroundColor} 
        animatedProps={circleAnimatedProps}
      />
    </Svg>
  )
}

[MatiPl01]

Good, but I can see an issue here. You shouldn't use hooks conditionally, so this animatedProps ? useAnimatedProps(() => { ... }) : {} is not valid and will throw error if you pass animatedProps props in one render and don't pass them in another one.

I would recommend passing just a single radius property instead of passing a separate radius prop which is a number and animatedProps with radius. It would be cleaner and simpler to manage.

If you want to have a separate value for cx and cy, please name this prop differently and pass it separately, e.g. like this:

import { StyleSheet } from 'react-native';
import type { SharedValue } from 'react-native-reanimated';
import Animated, { useAnimatedProps } from 'react-native-reanimated';
import Svg, { Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

type Props = {
  position: number;
  backgroundColor: string;
  radius: SharedValue<number>;
};

const Test = ({ position, radius, backgroundColor }: Props) => {
  const circleAnimatedProps = useAnimatedProps(() => {
    return {
      r: radius.value,
    };
  });

  return (
    <Svg style={StyleSheet.absoluteFill}>
      <AnimatedCircle
        // ref={ref}
        cx={position}
        cy={position}
        fill={backgroundColor}
        animatedProps={circleAnimatedProps}
      />
    </Svg>
  );
};

Let me know if it makes sense for you. If you have any questions, please ask.