Fix animated UI Props on Web

[piaskowyk]

Summary

This PR fixes regression introduced in #4977. Some animated props (for example UI props) required to be updated directly as component prop - setNativeProps(props), but all the rest of them still required to be updated as a component style - setNativeProps({style: props}).

before	after
Screen.Recording.2023-10-02.at.15.51.51.mov	Screen.Recording.2023-10-02.at.15.51.31.mov

Test plan

AnimatedProps - UIProps - #4909

import { Button, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedProps,
} from 'react-native-reanimated';
Animated.addWhitelistedNativeProps({
  accessibilityRole: true,
});
Animated.addWhitelistedUIProps({
  accessibilityRole: true,
});

export default function App() {
  const sharedRole = useSharedValue('initial');
  const animatedProps = useAnimatedProps(() => {
    console.debug('this gets trigered correctly', sharedRole.value);
    return {
      accessibilityRole: sharedRole.value
    };
  }, [sharedRole]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View
        animatedProps={animatedProps}
        nativeID="find-me-in-dev-tools">
        <Text>some lorem ipsum</Text>
      </Animated.View>
      <Button
        title="ToggleRole"
        onPress={() => {
          if (sharedRole.value == 'New Value') {
            sharedRole.value = 'New Value2';
          } else {
            sharedRole.value = 'New Value';
          }
        }}
      />
    </View>
  );
}

AnimatedProps

import { TextInput } from 'react-native';
import React, { useEffect } from 'react';
import Svg, {
  Path,
  Circle,
  G,
} from 'react-native-svg';
import Animated, {
  runOnJS,
  useSharedValue,
  useDerivedValue,
  useAnimatedProps,
  useAnimatedGestureHandler,
  interpolate,
} from 'react-native-reanimated';
import {PanGestureHandler} from 'react-native-gesture-handler';

const BORDER_WIDTH = 25;
const DIAL_RADIUS = 22.5;

export const {PI} = Math;
export const TAU = 2 * PI;

const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedG = Animated.createAnimatedComponent(G);
const AnimatedInput = Animated.createAnimatedComponent(TextInput);

const polarToCartesian = (
  angle: number,
  radius: number,
  {x, y}: {x: number; y: number},
) => {
  'worklet';
  const a = ((angle - 90) * Math.PI) / 180.0;
  return {x: x + radius * Math.cos(a), y: y + radius * Math.sin(a)};
};

const cartesianToPolar = (
  x: number,
  y: number,
  {x: cx, y: cy}: {x: number; y: number},
  step = 1,
) => {
  'worklet';

  const value =
    Math.atan((y - cy) / (x - cx)) / (Math.PI / 180) + (x > cx ? 90 : 270);

  return Math.round(value * (1 / step)) / (1 / step);
};

const unMix = (value: number, x: number, y: number) => {
  'worklet';
  return (value - x) / (y - x);
};

type Props = {
  width: number;
  height: number;
  fillColor: string[];
  value: number;
  meterColor: string;
  min?: number;
  max?: number;
  onValueChange: (value: any) => void;
  children: (
    props: Partial<{defaultValue: string; text: string}>,
  ) => React.ReactNode;
  step?: number;
  decimals?: number;
};

const CircleSlider = (props: Props) => {
  const {
    width,
    height,
    value,
    meterColor,
    children,
    min,
    max,
    step = 1,
    decimals,
  } = props;
  const smallestSide = Math.min(width, height);

  const cx = width / 2;
  const cy = height / 2;
  const r = (smallestSide / 2) * 0.85;

  const start = useSharedValue(0);
  const end = useSharedValue(unMix(value, min! / 360, max! / 360));

  useEffect(() => {
    end.value = unMix(value, min! / 360, max! / 360);
  }, [value, end, max, min]);

  const startPos = useDerivedValue(() =>
    polarToCartesian(start.value, r, {x: cx, y: cy}),
  );

  const endPos = useDerivedValue(() =>
    polarToCartesian(end.value, r, {x: cx, y: cy}),
  );

  const animatedPath = useAnimatedProps(() => {
    const p1 = startPos.value;
    const p2 = endPos.value;
    return {
      d: `M${p1.x} ${p1.y} A ${r} ${r} 0 ${end.value > 180 ? 1 : 0} 1 ${p2.x} ${
        p2.y
      }`,
    };
  });

  const animatedCircle = useAnimatedProps(() => {
    const p2 = endPos.value;
    return {
      x: p2.x - 7.5,
      y: p2.y - 7.5,
    };
  });

  const animatedChildrenProps = useAnimatedProps(() => {
    const decimalCount = (num: number) => {
      if (decimals) {
        return decimals;
      }
      const numStr = String(num);
      if (numStr.includes('.')) {
        return numStr.split('.')[1].length;
      }
      return 0;
    };

    const value = interpolate(end.value, [min! / 360, max! / 360], [min! / 360, max! / 360]);

    return {
      defaultValue: `${value.toFixed(decimalCount(step))}`,
      text: `${value.toFixed(decimalCount(step))}`,
    };
  });

  const gestureHandler = useAnimatedGestureHandler({
    onActive: ({x, y}: {x: number; y: number}, ctx: any) => {
      const value = cartesianToPolar(x, y, {x: cx, y: cy}, step);

      ctx.value = interpolate(value, [min! / 360, max! / 360], [min! / 360, max! / 360]);
      end.value = value;
    },
    onFinish: (_, ctx) => {
      runOnJS(props.onValueChange)(ctx.value);
    },
  });
  
  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View>
        <Svg width={width} height={height}>
          <Circle cx={cx} cy={cy} r={r + BORDER_WIDTH / 2 - 1} fill="blue" />
          <Circle
            cx={cx}
            cy={cy}
            r={r}
            strokeWidth={BORDER_WIDTH}
            fill="url(#fill)"
            stroke="rgba(255, 255, 525, 0.2)"
          />
          <AnimatedPath
            stroke={meterColor}
            strokeWidth={BORDER_WIDTH}
            fill="none"
            animatedProps={animatedPath}
          />
          <AnimatedG animatedProps={animatedCircle} onPress={() => {}}>
            <Circle cx={7.5} cy={7.5} r={DIAL_RADIUS} fill={meterColor} />
          </AnimatedG>
        </Svg>
        {children && children(animatedChildrenProps)}
      </Animated.View>
    </PanGestureHandler>
  );
};

CircleSlider.defaultProps = {
  width: 300,
  height: 300,
  fillColor: ['#fff'],
  meterColor: '#fff',
  min: 0,
  max: 359,
  step: 1,
  onValueChange: (x: any) => x,
};

export default function EmptyExample(): JSX.Element {
  const handleChange = value => console.log(value);
  console.log('EmptyExample');
  return (
    <CircleSlider
      width={325}
      height={325}
      value={0}
      meterColor={'#ffffff'}
      onValueChange={handleChange}>
      {animatedProps => (
        <AnimatedInput
          keyboardType="numeric"
          maxLength={3}
          selectTextOnFocus={false}
          animatedProps={animatedProps}
        />
      )}
    </CircleSlider>
  );
}

[tomekzaw]

LGTM

[m-bert]

Thanks for fixing that!