`translate` classNames having a parent with `translate` className, inherits those styles from its parent, ignoring own

[5ZYSZ3K]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When I use translate- classNames in a component which parent also utilizes translate- classNames, the ones passed to the child are ignored and replaced with those from the parent

Library version

3.0.7

Environment info

System:
  OS: macOS 26.3.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 182.69 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: /Users/pawelporeba/.asdf/installs/nodejs/22.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/pawelporeba/.asdf/installs/nodejs/22.14.0/bin/yarn
  npm:
    version: 10.9.2
    path: /Users/pawelporeba/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/pawelporeba/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.5
      - iOS 26.5
      - macOS 26.5
      - tvOS 26.5
      - visionOS 26.5
      - watchOS 26.5
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-31 | Google Play ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
      - android-37.0 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.30387.90.2532.14935130
  Xcode:
    version: 26.5/17F42
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: javac 17
    path: /Users/pawelporeba/.asdf/shims/javac
  Ruby:
    version: 3.3.3
    path: /Users/pawelporeba/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.3
    wanted: ^20.1.3
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.6
    wanted: 0.83.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Create a parent component with a translate- className
2. Add a child to it, using a different translate- className

Reproducible example repository

https://github.com/5ZYSZ3K/react-native-css-translation-2-repro

[github-actions]

🤖 Auto-triage

Status: CONFIRMED
Type: bug
Version: v5

Findings

Reproduced the bug via a Jest unit test simulating Tailwind v4's translate-* output pattern (each class sets a --tw-translate-x/--tw-translate-y CSS variable, then composes via translate: var(--tw-translate-x) var(--tw-translate-y)). When a child element uses different translate classes than its parent, the child receives the parent's translate values, duplicated 2× (4 transform entries), instead of its own.

The reporter's pinpointed root cause in src/native/objects.ts:73 (applyValue) is on the right track — the filter transformArray.filter((t) => !(prop in t)) checks for "translate" in {translateX: …} which is always false, so previous translate entries are never removed when a new translate shorthand is applied. Combined with CSS variable inheritance from the parent context, this leads to both duplication and the child inheriting the parent's translate values.

What I tested

• Read repro at https://github.com/5ZYSZ3K/react-native-css-translation-2-repro (App index.tsx + global.css)
• Wrote Jest test using registerCSS() simulating Tailwind v4's --tw-translate-x / translate: var(...) var(...) pattern
• Simple translate: 20px 0; shorthand case → works correctly
• Tailwind-style CSS-var composition on a single element → works
• Parent (-translate-x-1/4 -translate-y-1/4) + child (translate-x-20 translate-y-10) → child output became [{translateX:"-25%"},{translateY:"-25%"},{translateX:"-25%"},{translateY:"-25%"}] — clearly wrong

Next steps

• Fix applyValue in src/native/objects.ts so that applying the translate shorthand clears existing translateX/translateY transform entries (similarly for scale → scaleX/scaleY). The current prop in t check is broken for shorthand props since the existing entries use the long-hand keys.
• Consider whether CSS variable scoping for --tw-translate-* should be reset between parent/child boundaries when the variable is consumed by a translate shorthand, or whether this should be solved purely in the applyValue path.
• Add regression test covering both single-element multi-class and parent/child cases.

---

_{This is an automated triage. See auto-triage.yml.}