fix(app): trace the row's corners with its press highlight

The highlight is an overlay inside the pressable rather than a background on it, because the node Reanimated animates cannot also carry a themed Unistyles style. An overlay inherits nothing, so a rounded sidebar row flashed square. Take the corners from the pressable's own style. The row already declares its shape once, and a highlight that restated it would be a second copy free to drift; highlightStyle is left meaning only what the highlight is painted with. Corners apply before it, so a caller can still depart from the row's shape.
2026-08-04 12:05:34 +02:00
parent bfec5a05b9
commit 683f38443c
4 changed files with 99 additions and 3 deletions
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import type { StyleProp, ViewStyle } from "react-native";
+import { resolveHighlightCorners } from "./press-highlight.shape";
+
+describe("resolveHighlightCorners", () => {
+  it("takes the radius from the pressable's own style, the way a sidebar row declares it", () => {
+    const row = { minHeight: 36, borderRadius: 8, backgroundColor: "#111" };
+    expect(resolveHighlightCorners(row)).toEqual({ borderRadius: 8 });
+  });
+
+  it("reads through the style array a row builds per interaction state", () => {
+    const row: StyleProp<ViewStyle> = [{ borderRadius: 8 }, false, { backgroundColor: "#222" }];
+    expect(resolveHighlightCorners(row)).toEqual({ borderRadius: 8 });
+  });
+
+  it("keeps the last radius when a later entry in the array reshapes the row", () => {
+    expect(resolveHighlightCorners([{ borderRadius: 8 }, { borderRadius: 999 }])).toEqual({
+      borderRadius: 999,
+    });
+  });
+
+  it("carries every corner a row sets individually", () => {
+    const row = { borderTopLeftRadius: 8, borderBottomRightRadius: 2, paddingLeft: 12 };
+    expect(resolveHighlightCorners(row)).toEqual({
+      borderTopLeftRadius: 8,
+      borderBottomRightRadius: 2,
+    });
+  });
+
+  it("returns no corners for a square row, rather than a zero it never asked for", () => {
+    expect(resolveHighlightCorners({ backgroundColor: "#111" })).toEqual({});
+    expect(resolveHighlightCorners(undefined)).toEqual({});
+  });
+
+  it("leaves a style resolved per press state alone", () => {
+    expect(resolveHighlightCorners(() => ({ borderRadius: 8 }))).toEqual({});
+  });
+});