Add support for remaining synchronous props on Android (#7962)

## Summary

This PR adds support for the animating remaining synchronous props using
a fast path on Android (which is still hidden behind
`ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS` static Reanimated feature flag).

After this change, all props from
[NativeAnimatedAllowlist.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/NativeAnimatedAllowlist.js)
are supported, except for `scaleX`, `scaleY`, `translateX`, `translateY`
(which are deprecated outside of `transform`), `shadowOffset`,
`shadowOpacity` (which are not supported on Android at all) and `color`
(which doesn't work for some unknown reason).

Even though `elevation` and `zIndex` are supposed to be integers, I
decided to pass them as double to achieve the same behavior as when
animating them via `ShadowTree`.

## TODO

* Add support other `react-native` props, e.g. `filter`, `outlineColor`,
`placeholderTextColor` etc.
* Add support for other `react-native-svg` props, e.g. `fill`, `stroke`
etc.

## Test plan

Enable `ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS` static feature flag

<details>
<summary>

`tintColor`
</summary>

```tsx
import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const sv = useSharedValue(0);

  useEffect(() => {
    sv.value = 0;
    sv.value = withRepeat(withTiming(1, { duration: 500 }), -1, true);
  }, [sv]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      tintColor: interpolateColor(sv.value, [0, 1], ['red', 'blue']),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.Image
        style={[{ width: 50, height: 50 }, animatedStyle]}
        source={{
          uri: 'https://raw.githubusercontent.com/facebook/react-native/refs/heads/main/packages/rn-tester/js/assets/uie_thumb_normal%402x.png',
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

</details>

Author: tomekzaw

apps/common-app/src/apps/reanimated/examples/ColorExample.tsx

@@ -34,6 +34,10 @@ export default function ColorExample() {
     };
   });
 
+  const style5 = useAnimatedStyle(() => {
+    return { tintColor: makeColor(sv.value) };
+  });
+
   // TODO: textDecorationColor, tintColor, textShadowColor, overlayColor
 
   const handleToggle = () => {
@@ -47,6 +51,10 @@ export default function ColorExample() {
       <Animated.View style={[styles.box2, style2]} />
       <Animated.Text style={[styles.text3, style3]}>Reanimated</Animated.Text>
       <Animated.View style={[styles.box4, style4]} />
+      <Animated.Image
+        style={[styles.image5, style5]}
+        source={require('./assets/logo.png')}
+      />
       <View style={styles.buttons}>
         <Button onPress={handleToggle} title="Toggle shared value" />
       </View>
@@ -91,8 +99,13 @@ const styles = StyleSheet.create({
     shadowOpacity: 1,
     shadowColor: 'black',
     elevation: 20,
+    marginBottom: 50,
+  },
+  image5: {
+    width: 150,
+    height: 120,
   },
   buttons: {
-    marginTop: 50,
+    marginTop: 20,
   },
 });

apps/common-app/src/apps/reanimated/examples/assets/logo.png

@@ -674,24 +674,74 @@ void ReanimatedModuleProxy::performOperations() {
     if constexpr (StaticFeatureFlags::getFlag(
                       "ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS")) {
       static const std::unordered_set<std::string> synchronousProps = {
-          "transform",
           "opacity",
-          "borderRadius",
+          "elevation",
+          "zIndex",
+          // "shadowOpacity", // not supported on Android
+          // "shadowRadius", // not supported on Android
           "backgroundColor",
-          "borderColor",
           // "color", // TODO: fix animating color of Animated.Text
+          "tintColor",
+          "borderRadius",
+          "borderTopLeftRadius",
+          "borderTopRightRadius",
+          "borderTopStartRadius",
+          "borderTopEndRadius",
+          "borderBottomLeftRadius",
+          "borderBottomRightRadius",
+          "borderBottomStartRadius",
+          "borderBottomEndRadius",
+          "borderStartStartRadius",
+          "borderStartEndRadius",
+          "borderEndStartRadius",
+          "borderEndEndRadius",
+          "borderColor",
+          "borderTopColor",
+          "borderBottomColor",
+          "borderLeftColor",
+          "borderRightColor",
+          "borderStartColor",
+          "borderEndColor",
+          "transform",
       };
 
       // NOTE: Keep in sync with NativeProxy.java
       static constexpr auto CMD_START_OF_VIEW = 1;
       static constexpr auto CMD_START_OF_TRANSFORM = 2;
       static constexpr auto CMD_END_OF_TRANSFORM = 3;
       static constexpr auto CMD_END_OF_VIEW = 4;
+
       static constexpr auto CMD_OPACITY = 10;
-      static constexpr auto CMD_BORDER_RADIUS = 11;
-      static constexpr auto CMD_BACKGROUND_COLOR = 12;
-      static constexpr auto CMD_BORDER_COLOR = 13;
-      static constexpr auto CMD_COLOR = 14;
+      static constexpr auto CMD_ELEVATION = 11;
+      static constexpr auto CMD_Z_INDEX = 12;
+      static constexpr auto CMD_SHADOW_OPACITY = 13;
+      static constexpr auto CMD_SHADOW_RADIUS = 14;
+      static constexpr auto CMD_BACKGROUND_COLOR = 15;
+      static constexpr auto CMD_COLOR = 16;
+      static constexpr auto CMD_TINT_COLOR = 17;
+
+      static constexpr auto CMD_BORDER_RADIUS = 20;
+      static constexpr auto CMD_BORDER_TOP_LEFT_RADIUS = 21;
+      static constexpr auto CMD_BORDER_TOP_RIGHT_RADIUS = 22;
+      static constexpr auto CMD_BORDER_TOP_START_RADIUS = 23;
+      static constexpr auto CMD_BORDER_TOP_END_RADIUS = 24;
+      static constexpr auto CMD_BORDER_BOTTOM_LEFT_RADIUS = 25;
+      static constexpr auto CMD_BORDER_BOTTOM_RIGHT_RADIUS = 26;
+      static constexpr auto CMD_BORDER_BOTTOM_START_RADIUS = 27;
+      static constexpr auto CMD_BORDER_BOTTOM_END_RADIUS = 28;
+      static constexpr auto CMD_BORDER_START_START_RADIUS = 29;
+      static constexpr auto CMD_BORDER_START_END_RADIUS = 30;
+      static constexpr auto CMD_BORDER_END_START_RADIUS = 31;
+      static constexpr auto CMD_BORDER_END_END_RADIUS = 32;
+
+      static constexpr auto CMD_BORDER_COLOR = 40;
+      static constexpr auto CMD_BORDER_TOP_COLOR = 41;
+      static constexpr auto CMD_BORDER_BOTTOM_COLOR = 42;
+      static constexpr auto CMD_BORDER_LEFT_COLOR = 43;
+      static constexpr auto CMD_BORDER_RIGHT_COLOR = 44;
+      static constexpr auto CMD_BORDER_START_COLOR = 45;
+      static constexpr auto CMD_BORDER_END_COLOR = 46;
+
       static constexpr auto CMD_TRANSFORM_TRANSLATE_X = 100;
       static constexpr auto CMD_TRANSFORM_TRANSLATE_Y = 101;
       static constexpr auto CMD_TRANSFORM_SCALE = 102;
@@ -705,6 +755,7 @@ void ReanimatedModuleProxy::performOperations() {
       static constexpr auto CMD_TRANSFORM_SKEW_Y = 110;
       static constexpr auto CMD_TRANSFORM_MATRIX = 111;
       static constexpr auto CMD_TRANSFORM_PERSPECTIVE = 112;
+
       static constexpr auto CMD_UNIT_DEG = 200;
       static constexpr auto CMD_UNIT_RAD = 201;
       static constexpr auto CMD_UNIT_PX = 202;
@@ -713,46 +764,134 @@ void ReanimatedModuleProxy::performOperations() {
       const auto propNameToCommand = [](const std::string &name) {
         if (name == "opacity")
           return CMD_OPACITY;
-        if (name == "borderRadius")
-          return CMD_BORDER_RADIUS;
+
+        if (name == "elevation")
+          return CMD_ELEVATION;
+
+        if (name == "zIndex")
+          return CMD_Z_INDEX;
+
+        if (name == "shadowOpacity")
+          return CMD_SHADOW_OPACITY;
+
+        if (name == "shadowRadius")
+          return CMD_SHADOW_RADIUS;
+
         if (name == "backgroundColor")
           return CMD_BACKGROUND_COLOR;
-        if (name == "borderColor")
-          return CMD_BORDER_COLOR;
+
         if (name == "color")
           return CMD_COLOR;
+
+        if (name == "tintColor")
+          return CMD_TINT_COLOR;
+
+        if (name == "borderRadius")
+          return CMD_BORDER_RADIUS;
+
+        if (name == "borderTopLeftRadius")
+          return CMD_BORDER_TOP_LEFT_RADIUS;
+
+        if (name == "borderTopRightRadius")
+          return CMD_BORDER_TOP_RIGHT_RADIUS;
+
+        if (name == "borderTopStartRadius")
+          return CMD_BORDER_TOP_START_RADIUS;
+
+        if (name == "borderTopEndRadius")
+          return CMD_BORDER_TOP_END_RADIUS;
+
+        if (name == "borderBottomLeftRadius")
+          return CMD_BORDER_BOTTOM_LEFT_RADIUS;
+
+        if (name == "borderBottomRightRadius")
+          return CMD_BORDER_BOTTOM_RIGHT_RADIUS;
+
+        if (name == "borderBottomStartRadius")
+          return CMD_BORDER_BOTTOM_START_RADIUS;
+
+        if (name == "borderBottomEndRadius")
+          return CMD_BORDER_BOTTOM_END_RADIUS;
+
+        if (name == "borderStartStartRadius")
+          return CMD_BORDER_START_START_RADIUS;
+
+        if (name == "borderStartEndRadius")
+          return CMD_BORDER_START_END_RADIUS;
+
+        if (name == "borderEndStartRadius")
+          return CMD_BORDER_END_START_RADIUS;
+
+        if (name == "borderEndEndRadius")
+          return CMD_BORDER_END_END_RADIUS;
+
+        if (name == "borderColor")
+          return CMD_BORDER_COLOR;
+
+        if (name == "borderTopColor")
+          return CMD_BORDER_TOP_COLOR;
+
+        if (name == "borderBottomColor")
+          return CMD_BORDER_BOTTOM_COLOR;
+
+        if (name == "borderLeftColor")
+          return CMD_BORDER_LEFT_COLOR;
+
+        if (name == "borderRightColor")
+          return CMD_BORDER_RIGHT_COLOR;
+
+        if (name == "borderStartColor")
+          return CMD_BORDER_START_COLOR;
+
+        if (name == "borderEndColor")
+          return CMD_BORDER_END_COLOR;
+
         if (name == "transform")
           return CMD_START_OF_TRANSFORM; // TODO: use CMD_TRANSFORM?
+
         throw std::runtime_error("Unsupported style: " + name);
       };
 
       const auto transformNameToCommand = [](const std::string &name) {
         if (name == "translateX")
           return CMD_TRANSFORM_TRANSLATE_X;
+
         if (name == "translateY")
           return CMD_TRANSFORM_TRANSLATE_Y;
+
         if (name == "scale")
           return CMD_TRANSFORM_SCALE;
+
         if (name == "scaleX")
           return CMD_TRANSFORM_SCALE_X;
+
         if (name == "scaleY")
           return CMD_TRANSFORM_SCALE_Y;
+
         if (name == "rotate")
           return CMD_TRANSFORM_ROTATE;
+
         if (name == "rotateX")
           return CMD_TRANSFORM_ROTATE_X;
+
         if (name == "rotateY")
           return CMD_TRANSFORM_ROTATE_Y;
+
         if (name == "rotateZ")
           return CMD_TRANSFORM_ROTATE_Z;
+
         if (name == "skewX")
           return CMD_TRANSFORM_SKEW_X;
+
         if (name == "skewY")
           return CMD_TRANSFORM_SKEW_Y;
+
         if (name == "matrix")
           return CMD_TRANSFORM_MATRIX;
+
         if (name == "perspective")
           return CMD_TRANSFORM_PERSPECTIVE;
+
         throw std::runtime_error("Unsupported transform: " + name);
       };
 
@@ -787,14 +926,37 @@ void ReanimatedModuleProxy::performOperations() {
             const auto command = propNameToCommand(key.getString());
             switch (command) {
               case CMD_OPACITY:
+              case CMD_ELEVATION:
+              case CMD_Z_INDEX:
+              case CMD_SHADOW_OPACITY:
+              case CMD_SHADOW_RADIUS:
               case CMD_BORDER_RADIUS:
+              case CMD_BORDER_TOP_LEFT_RADIUS:
+              case CMD_BORDER_TOP_RIGHT_RADIUS:
+              case CMD_BORDER_TOP_START_RADIUS:
+              case CMD_BORDER_TOP_END_RADIUS:
+              case CMD_BORDER_BOTTOM_LEFT_RADIUS:
+              case CMD_BORDER_BOTTOM_RIGHT_RADIUS:
+              case CMD_BORDER_BOTTOM_START_RADIUS:
+              case CMD_BORDER_BOTTOM_END_RADIUS:
+              case CMD_BORDER_START_START_RADIUS:
+              case CMD_BORDER_START_END_RADIUS:
+              case CMD_BORDER_END_START_RADIUS:
+              case CMD_BORDER_END_END_RADIUS:
                 intBuffer.push_back(command);
                 doubleBuffer.push_back(value.asDouble());
                 break;
 
               case CMD_BACKGROUND_COLOR:
-              case CMD_BORDER_COLOR:
               case CMD_COLOR:
+              case CMD_TINT_COLOR:
+              case CMD_BORDER_COLOR:
+              case CMD_BORDER_TOP_COLOR:
+              case CMD_BORDER_BOTTOM_COLOR:
+              case CMD_BORDER_LEFT_COLOR:
+              case CMD_BORDER_RIGHT_COLOR:
+              case CMD_BORDER_START_COLOR:
+              case CMD_BORDER_END_COLOR:
                 intBuffer.push_back(command);
                 intBuffer.push_back(value.asInt());
                 break;