Unable to animate arbitrary style props with NativeAnimated

[rozele]

Problem Description

The core RN Animated API affords users the ability to animate arbitrary props. For example, you can animate a square to a circle by animating the borderRadius prop.

This functionality is not supported by the current implementation of NativeAnimated in react-native-windows.

Steps To Reproduce

1. Add an example to RNTester > Native Animated Example that animates an arbitrary prop, e.g., borderRadius:

  {
    title: 'Animate arbitrary prop',
    render: function (): React.Node {
      return (
        <Tester type="timing" config={{duration: 4000}}>
          {(anim) => (
            <Animated.View
              style={[
                styles.block,
                {
                  borderRadius: anim.interpolate({
                    inputRange: [0, 0.5, 1],
                    outputRange: [0, 25, 0],
                  }),
                },
              ]}
            />
          )}
        </Tester>
      );
    },
  }

2. Run example.
3. Native animation does nothing, JS driven animation works correctly.

Expected Results

The native-driven example should match the behavior of the JS-driven example.

CLI version

npx react-native --version

Environment

npx react-native info

Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

Snack, code example, screenshot, or link to a repository

React.Native.Playground.Win32.2021-12-08.14-10-08.mp4

Many of our core contributors are taking some much needed vacation throughout December 2021. Thank you for being patient while we relax, recharge, and return to a normal responsiveness in January 2022. In the meantime feel free to continue to pose questions, open issues, and make feature requests - you just may not get a response right away.