`translate` classNames moving the component twice as far

Aberta
  • Algo errado?
#356 1 comentário 0 reações 1 responsável Ver no GitHub

Mantenedores costumam responder em até 12 dias

@danstepanov já está trabalhando nisso.

Desde 15/7/2026.

  • #357 de @5ZYSZ3K — fechado sem integrar

Avaliação

Esta issue ainda não foi avaliada.

Descrição

auto-triaged bug confirmed deferred (post-5.0)
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

There is an issue:
When I pass just one translate class (e.g. translate-x-1), the component gets moved as expected
But, when I pass two classes, e.g. translate-x-1 translate-y-1, then it gets moved twice as far in both directions.

Basically:
translate-x-1 gets parsed to {transform: [{translateX: 4}, {translateY: 0}]}
translate-x-1 translate-y-1 gets parsed to {transform: [{translateX: 4}, {translateY: 4}, {translateX: 4}, {translateY: 4}]}
Transform objects are doubled, which causes it to move twice as far

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

You just need to pass two translate classes at once, e.g. translate-x-1 translate-y-1

Reproducible example repository

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

Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
17d 22h
PRs com merge (30d)
3

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.