Fix colour comparison on Android (#6383)

## Summary

Due to some recent changes some views are instances of
CSSBackgroundDrawable instead of ReactViewBackgroundDrawable. I didn't
track which PR introduced this change, since
`ReactViewBackgroundDrawable` is marked as deprecated anyway.

This PR contains changes to make snapshot colour comparison work again.

<img width="635" alt="image"
src="https://github.com/user-attachments/assets/6f6fbf7b-7bcc-4cc6-9a53-54d6861e6dcf">


## Test plan

apps/common-app/src/examples/RuntimeTests/ReJest/matchers/snapshotMatchers.ts

@@ -41,9 +41,8 @@ function compareSingleViewSnapshots(
   }
 
   for (let i = 0; i < capturedSnapshots.length - 1; i++) {
-    if (native) {
-      const capturedSnapshot = capturedSnapshots[i];
-      /**
+    const capturedSnapshot = capturedSnapshots[i];
+    /**
       The TestRunner can collect two types of snapshots:
       - JS snapshots: animation updates sent via `_updateProps`
       - Native snapshots: snapshots obtained from the native side via `getViewProp`
@@ -54,16 +53,14 @@ function compareSingleViewSnapshots(
       we need to wait for the next frame before capturing the native snapshot.
       That's why native snapshots are one frame behind JS snapshots. To account for this delay,
       one additional native snapshot is taken during the execution of the `getNativeSnapshots` function. */
-      const expectedSnapshot = expectedSnapshots[i + Number(native)];
-      const snapshotMatching = compareSnapshot(expectedSnapshot, capturedSnapshot, expectNegativeValueMismatch);
-
-      if (!snapshotMatching) {
-        mismatchedSnapshots.push({
-          index: i,
-          expectedSnapshot: expectedSnapshots[i + Number(native)],
-          capturedSnapshot: capturedSnapshots[i],
-        });
-      }
+    const expectedSnapshot = expectedSnapshots[i + Number(native)];
+    const snapshotMatching = compareSnapshot(expectedSnapshot, capturedSnapshot, expectNegativeValueMismatch);
+    if (!snapshotMatching) {
+      mismatchedSnapshots.push({
+        index: i,
+        expectedSnapshot: expectedSnapshots[i + Number(native)],
+        capturedSnapshot: capturedSnapshots[i],
+      });
     }
   }
 

apps/common-app/src/examples/RuntimeTests/ReJest/utils/drawSnapshotTable.ts

@@ -1,6 +1,8 @@
 import { isColor } from 'react-native-reanimated';
+import { ComparisonMode, isValidPropName } from '../types';
 import type { Mismatch, TestValue } from '../types';
 import { green, red, color, getColorSquare } from './stringFormatUtils';
+import { getComparator, getComparisonModeForProp } from '../matchers/Comparators';
 
 const VALUE_COLUMN_WIDTH = 15;
 const INDEX_COLUMN_WIDTH = 7;
@@ -105,7 +107,9 @@ function getComparisonRow(mismatch: Mismatch, keys: Array<string>) {
     const expectedValue = expectedSnapshot[key as keyof typeof expectedSnapshot];
     const capturedValue = capturedSnapshot[key as keyof typeof capturedSnapshot];
 
-    const match = expectedValue === capturedValue;
+    const comparisonMode = isValidPropName(key) ? getComparisonModeForProp(key) : ComparisonMode.AUTO;
+
+    const match = getComparator(comparisonMode)(expectedValue, capturedValue);
 
     const expectedAdjusted = adjustValueToLength(expectedValue, VALUE_COLUMN_WIDTH, key);
     const capturedAdjusted = adjustValueToLength(capturedValue, VALUE_COLUMN_WIDTH, key);

apps/common-app/src/examples/RuntimeTests/ReJest/utils/util.ts

@@ -6,27 +6,18 @@ export function convertDecimalColor(color: unknown): string {
     return `${color?.toString()}`;
   }
 
-  const size = 8;
-  let hexColor = '';
+  // eslint-disable-next-line no-bitwise
+  const posColor = color >= 0 ? color : 0xffffff & color;
+  let hexColor = posColor.toString(16);
 
-  if (color >= 0) {
-    hexColor = color.toString(16);
-
-    while (hexColor.length % size !== 0) {
-      hexColor = '' + 0 + hexColor;
-    }
-  } else {
-    let hexadecimal = Math.abs(color).toString(16);
-    while (hexColor.length % size !== 0) {
-      hexadecimal = '' + 0 + hexadecimal;
-    }
+  while (hexColor.length < 6) {
+    hexColor = '0' + hexColor;
+  }
+  while (hexColor.length < 8) {
+    hexColor = 'f' + hexColor;
+  }
 
-    hexColor = '';
-    for (let i = 0; i < hexColor.length; i++) {
-      hexColor += (0x0f - parseInt(hexColor[i], 16)).toString(16);
-    }
+  // color has now format #AA-RR-GG-BB, but we return #RR-GG-BB-AA, (A stands for alpha)
 
-    hexColor = (0x01 + parseInt(hexColor, 16)).toString(16);
-  }
   return '#' + hexColor.slice(2) + hexColor.slice(0, 2);
 }

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NodesManager.java

@@ -29,6 +29,7 @@
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.UIManagerReanimatedHelper;
 import com.facebook.react.uimanager.common.UIManagerType;
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcherListener;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
@@ -453,13 +454,23 @@ public String obtainProp(int viewTag, String propName) {
         return Float.toString(PixelUtil.toDIPFromPixel(view.getLeft()));
       case "backgroundColor":
         Drawable background = view.getBackground();
-        if (!(background instanceof ReactViewBackgroundDrawable)) {
-          return "unable to resolve background color";
+        int actualColor = -1;
+        if (background instanceof ReactViewBackgroundDrawable) {
+          actualColor = ((ReactViewBackgroundDrawable) background).getColor();
         }
-        int actualColor = ((ReactViewBackgroundDrawable) background).getColor();
+
+        if (background instanceof CSSBackgroundDrawable) {
+          actualColor = ((CSSBackgroundDrawable) background).getColor();
+        }
+
+        if (actualColor == -1) {
+          return "Unable to resolve background color";
+        }
+
         String invertedColor = String.format("%08x", (0xFFFFFFFF & actualColor));
         // By default transparency is first, color second
         return "#" + invertedColor.substring(2, 8) + invertedColor.substring(0, 2);
+
       default:
         throw new IllegalArgumentException(
             "[Reanimated] Attempted to get unsupported property "