fix: preserve className styles on multi-config and non-style array targets

Two related bugs caused className-computed styles to be silently destroyed:

1. deepMergeConfig did not merge className + inline styles for length-1
   array targets like ["contentContainerStyle"]. Inline values simply
   overwrote the className-computed value instead of producing a style
   array (the behavior already implemented for the ["style"] path).

2. getStyledProps iterates over multiple configs (e.g. ScrollView has
   className→style and contentContainerClassName→contentContainerStyle).
   Each iteration produced a full props object via Object.assign, so
   later iterations overwrote earlier iterations' correctly-merged
   target props.

Fix (1) by adding a finalKey merge block for length-1 array targets in
deepMergeConfig, mirroring the existing string-target merge logic.

Fix (2) by saving each config iteration's computed target value and
restoring them after the loop completes.

Adds tests for both paths including ScrollView, FlatList, and custom
styled() components with className + inline style combinations.

Author: Inv1x

src/__tests__/native/className-with-style.test.tsx

@@ -175,11 +175,11 @@ describe("style={undefined} should not destroy computed className styles", () =>
       />,
     ).getByTestId(testID);
 
-    // Non-"style" targets: inline contentContainerStyle overwrites className styles
-    // (array coexistence is only implemented for the ["style"] target path)
-    expect(component.props.contentContainerStyle).toStrictEqual({
-      padding: 10,
-    });
+    // Both className and inline contentContainerStyle should coexist as array
+    expect(component.props.contentContainerStyle).toStrictEqual([
+      { backgroundColor: "#008000" },
+      { padding: 10 },
+    ]);
   });
 
   test("ScrollView: contentContainerClassName without contentContainerStyle", () => {
@@ -393,3 +393,140 @@ describe("style={{}} should not destroy computed className styles", () => {
     });
   });
 });
+
+/**
+ * Tests for multi-config components (e.g. ScrollView with both className and
+ * contentContainerClassName) where inline style on one target should not
+ * destroy computed className styles on a different target.
+ *
+ * Bug: getStyledProps loops over configs, and each iteration calls deepMergeConfig
+ * which produces a full props object via Object.assign({}, left, right). When a
+ * later config iteration runs, it overwrites the correctly-merged target props
+ * from earlier iterations.
+ *
+ * Example: ScrollView with className="bg-red" and style={{ paddingTop: 10 }}.
+ * The first config (className→style) correctly merges both. The second config
+ * (contentContainerClassName→contentContainerStyle) does Object.assign which
+ * copies the inline style={{ paddingTop: 10 }} over the merged style, destroying
+ * the backgroundColor from className.
+ */
+describe("multi-config: inline style should not destroy className styles on other targets", () => {
+  test("ScrollView: className with style should preserve className styles", () => {
+    registerCSS(`.bg-red { background-color: red; }`);
+
+    const component = render(
+      <ScrollView
+        testID={testID}
+        className="bg-red"
+        style={{ paddingTop: 10 }}
+      />,
+    ).getByTestId(testID);
+
+    // className backgroundColor should coexist with inline paddingTop
+    expect(component.props.style).toStrictEqual([
+      { backgroundColor: "#f00" },
+      { paddingTop: 10 },
+    ]);
+  });
+
+  test("ScrollView: className + contentContainerClassName + style preserves all", () => {
+    registerCSS(`
+      .bg-red { background-color: red; }
+      .p-4 { padding: 16px; }
+    `);
+
+    const component = render(
+      <ScrollView
+        testID={testID}
+        className="bg-red"
+        contentContainerClassName="p-4"
+        style={{ paddingTop: 10 }}
+      />,
+    ).getByTestId(testID);
+
+    // className-derived style merged with inline style
+    expect(component.props.style).toStrictEqual([
+      { backgroundColor: "#f00" },
+      { paddingTop: 10 },
+    ]);
+
+    // contentContainerClassName should be independently preserved
+    expect(component.props.contentContainerStyle).toStrictEqual({
+      padding: 16,
+    });
+  });
+
+  test("ScrollView: className + contentContainerClassName + both inline styles", () => {
+    registerCSS(`
+      .bg-red { background-color: red; }
+      .p-4 { padding: 16px; }
+    `);
+
+    const component = render(
+      <ScrollView
+        testID={testID}
+        className="bg-red"
+        contentContainerClassName="p-4"
+        style={{ paddingTop: 10 }}
+        contentContainerStyle={{ marginTop: 5 }}
+      />,
+    ).getByTestId(testID);
+
+    // Both targets should have merged className + inline styles
+    expect(component.props.style).toStrictEqual([
+      { backgroundColor: "#f00" },
+      { paddingTop: 10 },
+    ]);
+
+    expect(component.props.contentContainerStyle).toStrictEqual([
+      { padding: 16 },
+      { marginTop: 5 },
+    ]);
+  });
+
+  test("ScrollView: className without style still works (single-config path)", () => {
+    registerCSS(`.bg-red { background-color: red; }`);
+
+    const component = render(
+      <ScrollView testID={testID} className="bg-red" />,
+    ).getByTestId(testID);
+
+    expect(component.props.style).toStrictEqual({ backgroundColor: "#f00" });
+  });
+
+  test("ScrollView: consumed className sources should be removed from props", () => {
+    registerCSS(`.bg-red { background-color: red; }`);
+
+    const component = render(
+      <ScrollView
+        testID={testID}
+        className="bg-red"
+        contentContainerClassName="bg-red"
+        style={{ paddingTop: 10 }}
+      />,
+    ).getByTestId(testID);
+
+    // className and contentContainerClassName should be consumed, not passed through
+    expect(component.props.className).toBeUndefined();
+    expect(component.props.contentContainerClassName).toBeUndefined();
+  });
+
+  test("FlatList: contentContainerClassName with contentContainerStyle preserves both", () => {
+    registerCSS(`.bg-blue { background-color: blue; }`);
+
+    const component = render(
+      <FlatList
+        testID={testID}
+        data={[]}
+        renderItem={() => null}
+        contentContainerClassName="bg-blue"
+        contentContainerStyle={{ height: 200 }}
+      />,
+    ).getByTestId(testID);
+
+    expect(component.props.contentContainerStyle).toStrictEqual([
+      { backgroundColor: "#00f" },
+      { height: 200 },
+    ]);
+  });
+});

src/native/styles/index.ts

@@ -191,6 +191,14 @@ export function getStyledProps(
 
   const styledProps = state.stylesObs?.get(state.styleEffect);
 
+  // When multiple configs exist (e.g. ScrollView with className→style and
+  // contentContainerClassName→contentContainerStyle), each iteration of
+  // deepMergeConfig produces a full props object via Object.assign({}, left, right).
+  // Later iterations overwrite earlier ones' correctly-merged target props.
+  // We save each iteration's target value and restore them after the loop.
+  const computedTargets: Record<string, any> = {};
+  const consumedSources: string[] = [];
+
   for (const config of state.configs) {
     result = deepMergeConfig(
       config,
@@ -207,6 +215,21 @@ export function getStyledProps(
       );
     }
 
+    // Save the correctly-merged target prop from this iteration
+    if (result && config.target) {
+      const targetKey = Array.isArray(config.target)
+        ? config.target[config.target.length - 1]
+        : config.target;
+      if (targetKey && targetKey in result) {
+        computedTargets[targetKey] = result[targetKey];
+      }
+    }
+
+    // Track consumed className sources for cleanup
+    if (config.source !== config.target) {
+      consumedSources.push(config.source);
+    }
+
     // Apply the handlers
     if (hoverFamily.has(state.ruleEffectGetter)) {
       result ??= {};
@@ -265,6 +288,17 @@ export function getStyledProps(
     }
   }
 
+  // Restore correctly-merged target props that may have been overwritten
+  // by later config iterations' Object.assign({}, left, right)
+  if (result) {
+    for (const key in computedTargets) {
+      result[key] = computedTargets[key];
+    }
+    for (const source of consumedSources) {
+      delete result[source];
+    }
+  }
+
   return result;
 }
 
@@ -437,6 +471,41 @@ function deepMergeConfig(
       );
     }
 
+    // For length-1 array targets (e.g. ["contentContainerStyle"]), the loop
+    // above runs 0 iterations. Merge the target prop so inline styles don't
+    // silently overwrite className-computed styles (same as string target path).
+    const finalKey = config.target[config.target.length - 1];
+    if (finalKey && rightIsInline) {
+      let rightValue = right?.[finalKey];
+      if (rightValue !== undefined) {
+        rightValue = filterCssVariables(rightValue);
+      }
+      if (rightValue === undefined || rightValue === null) {
+        // Inline is empty — preserve className-computed value
+        if (left && finalKey in left) {
+          result[finalKey] = left[finalKey];
+        }
+      } else if (left && finalKey in left) {
+        const leftValue = left[finalKey];
+        const leftIsObj =
+          typeof leftValue === "object" &&
+          leftValue !== null &&
+          !Array.isArray(leftValue);
+        const rightIsObj =
+          typeof rightValue === "object" &&
+          rightValue !== null &&
+          !Array.isArray(rightValue);
+        if (leftIsObj && rightIsObj) {
+          if (hasNonOverlappingProperties(leftValue, rightValue)) {
+            result[finalKey] = [leftValue, rightValue];
+          }
+          // else: all left keys are in right, right overrides — already set by mergeDefinedProps
+        } else {
+          result[finalKey] = [leftValue, rightValue];
+        }
+      }
+    }
+
     return result;
   }