Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

`translate` classNames moving the component twice as far

Abierto
  • ¿Algo no está bien?
#356 1 comentario 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 3 días

@danstepanov ya está trabajando en esto.

Desde el 15/7/2026.

  • #357 de @5ZYSZ3K — cerrado sin fusionar

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
166
Forks
45
Merge medio
13 d 14 h
PR fusionados (30 d)
1

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nativewind/react-native-css

Todos los issues de nativewind/react-native-css

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.