[YevheniiKotyrlo]

Problem

deepMergeConfig combines a computed style value with another one in three places, three ways:

• important styles over the computed ones: flattened into one object;
• an inline value over a one-segment array target ("style", "contentContainerStyle"): the inline value alone when it overrides every computed key, otherwise both in an array;
• an inline value over a one-segment string target ({ target: "style" }): always both in an array.

So { className: "style" } and { className: { target: "style" } }, two spellings of one mapping, combine style={{ backgroundColor: "blue" }} over bg-red differently: the first gives { backgroundColor: "blue" }, the second [{ backgroundColor: "#f00" }, { backgroundColor: "blue" }]. And a new kind of style value has to be handled in all three places, as #416 does for a Pressable's callback style.

Before any of them, filterCssVariables rebuilds every inline object key by key, so an inline style never reaches the component as the object it was, and an Animated.Value inside one arrives as { _value: 0.5, _offset: 0, … }, which no animation drives.

Solution

combineStyleValues(left, right, layering) is the one combination: a callback composes with the other value, a value that overrides every key of the other replaces it, and otherwise the two are flattened when this library computed both (important styles) or layered when one came from the element, since an inline style object can carry an identity a copy would lose. The three sites call it, so the string target collapses as its array spelling does; the important and array-target paths combine as before.

filterCssVariables copies only what holds a CSS variable, an undefined entry or a Symbol key, and leaves a class instance whole, so an inline style that holds none reaches the component as it came.

Tests

src/__tests__/native/className-with-style.test.tsx: both spellings of a style target, with an inline style that sets every property the class sets (it replaces the class's value) and one that sets other properties (the two are layered). On main the object form returns both values in an array where the shorthand returns the inline value alone. For style and contentContainerStyle in both spellings, an inline style is layered as the same object and an Animated.Value in it stays itself; on main all eight fail. The existing suites hold the other two paths, the CSS variable filtering, and #416's callback styles.

Verification

Every ci.yml job passes on this head merged into main with #477's harness fix: lint, typecheck, the tests (1519 passed), both builds, the web export, nothing unstaged, commitlint, and the iOS dev build on macOS 27.0.1 with Xcode 27.0, where CI pins 26.6.

A re-render costs the same within the noise. The runs, and the Animated.Value snippet on main and here, are in this comment.

Merge order

• This builds on feat(native): interop react-native-gesture-handler's Pressable and button family #416, whose callback styles it folds into the one combination, so feat(native): interop react-native-gesture-handler's Pressable and button family #416 lands first and this carries its commits until it does.

[YevheniiKotyrlo]

An inline Animated.Value beside a class style — main against this PR

import { Animated, View } from "react-native";
import { styled } from "react-native-css";

const StyledView = styled(View, { className: "style" });
const opacity = new Animated.Value(0.5);

// .padded { padding: 4px; }
<StyledView className="padded" style={{ opacity }} />;

What the View receives, read from its props:

	style	its second entry	that entry's opacity
main (eda2b286)	[{ padding: 4 }, { opacity }]	a copy of the inline style	{ _value: 0.5, _offset: 0, … }, a plain object no animation drives
this PR	[{ padding: 4 }, { opacity }]	the inline style itself	the same Animated.Value

The same holds for contentContainerStyle, and for both spellings of each target, as className-with-style.test.tsx asserts.

Re-render cost — main against this PR

Each case re-renders 3000 times after 200 of warm-up, in its own jest process after a warm-up case, and the sides alternate over ten rounds after one of warm-up. µs per re-render, median and interquartile range:

case	main (eda2b286)	this PR	per-round difference
a class style alone	49.0 (40.9–69.8)	44.9 (40.8–49.1)	−5.4 (−14.5 to 0.5)
a class style beside an inline style	46.0 (42.8–53.3)	45.1 (42.3–74.5)	+0.8 (−5.4 to 29.2)
a class style beside an inline Animated.Value	58.4 (53.1–67.8)	54.1 (51.0–59.2)	−1.5 (−6.1 to 10.5)
a Pressable's class style beside a style function	61.0 (54.1–79.5)	61.9 (54.8–79.1)	+1.8 (−1.7 to 23.3)

Other work on the machine widened every spread; a class style alone, which neither the combination nor the filter reaches, puts the noise floor near 10 µs, and no difference passes it.

Windows 11 Pro 10.0.26200, AMD Ryzen 9 9950X3D, Node 26.8.1, jest 29.7.0.