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

https://user-images.githubusercontent.com/1106239/145269133-21aa3647-67f3-4b06-b0f8-499bc12a2076.mp4

[ghost]

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.

[chrisglein]

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

I assume this class of animation will be stuck running on the UI thread, because none of these values are handled directly by the rendering thread (composition animations). That does add some complexity in that animations are running in two places.

We should step back and talk about the overall story of composition animations vs. UI thread animations (dependent animations, in XAML terms) and what y'all need.

[rozele]

Re-opening, as this is technically still a bug for the composition-based NativeAnimated implementation and the tick-based implementation is opt-in.

For a temporary workaround use:

// Animated.timing is an example, same syntax for any animation driver
Animated.timing({
  /* ... */,
  useNativeDriver: true,
  platformConfig: {
    useComposition: false,
  }
);