fix: allow className and style props to coexist when properties differ

Previously, when both className and style props were provided, className-derived
styles would be completely overwritten by inline styles due to Object.assign()
behavior in deepMergeConfig().

This refined solution:
- Only creates style arrays when className and inline styles have non-overlapping properties
- Maintains CSS precedence rules (inline styles override className for same properties)
- Preserves backward compatibility with existing behavior
- Passes all existing tests while enabling the new functionality

Enables combining NativeWind className styling with React Native Reanimated
animated styles when they target different CSS properties.

Fixes issue where className was ignored when style prop was also present,
while preserving expected CSS specificity behavior.

Author: tyrauber

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

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react-native";
+import { Text } from "react-native-css/components/Text";
+import { registerCSS, testID } from "react-native-css/jest";
+
+test("className with inline style props should coexist when different properties", () => {
+  registerCSS(`.text-red { color: red; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red" style={{ fontSize: 16 }} />,
+  ).getByTestId(testID);
+
+  // Both className and style props should be applied as array
+  expect(component.props.style).toEqual([
+    { color: "#f00" }, // Changed from "red" to "#f00"
+    { fontSize: 16 },
+  ]);
+});
+
+test("className with inline style props should favor inline when same property", () => {
+  registerCSS(`.text-red { color: red; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red" style={{ color: "blue" }} />,
+  ).getByTestId(testID);
+
+  // When same property exists, inline style should win (not array)
+  expect(component.props.style).toEqual({ color: "blue" });
+});
+
+test("only className should not create array", () => {
+  registerCSS(`.text-red { color: red; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red" />,
+  ).getByTestId(testID);
+
+  // Only className should be a flat object
+  expect(component.props.style).toEqual({ color: "#f00" }); // Changed from "red" to "#f00"
+});
+
+test("only inline style should not create array", () => {
+  const component = render(
+    <Text testID={testID} style={{ color: "blue" }} />,
+  ).getByTestId(testID);
+
+  // Only inline style should be a flat object
+  expect(component.props.style).toEqual({ color: "blue" });
+});

src/native/styles/index.ts

@@ -135,7 +135,30 @@ function deepMergeConfig(
     return { ...left };
   }
 
-  let result = config.target ? Object.assign({}, left, right) : { ...left };
+  // Handle style merging to support both className and inline style props
+  let result: Record<string, any>;
+  if (config.target) {
+    if (Array.isArray(config.target) && config.target.length === 1 && config.target[0] === "style") {
+      // Special handling for style target when we have inline styles
+      result = { ...left, ...right };
+      if (left?.style && right?.style && rightIsInline) {
+        // Only create style arrays when we have different properties that should coexist
+        const leftKeys = new Set(Object.keys(left.style));
+        const rightKeys = new Set(Object.keys(right.style));
+        const hasNonOverlappingProperties = [...leftKeys].some(key => !rightKeys.has(key));
+        
+        if (hasNonOverlappingProperties) {
+          // Different properties exist - create array for React Native to merge both
+          result.style = [left.style, right.style];
+        }
+        // If all properties overlap, right.style will override via Object.assign above
+      }
+    } else {
+      result = Object.assign({}, left, right);
+    }
+  } else {
+    result = { ...left };
+  }
 
   if (
     right &&