Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

`translate` classNames moving the component twice as far

オープン
  • 何か問題がありますか？
#356 コメント 1 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

@danstepanov がすでに取り組んでいます。

2026年7月15日 から。

  • #357 @5ZYSZ3K による — マージされずにクローズ

評価

この issue はまだ評価されていません。

説明

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

主要言語
TypeScript
スター
166
フォーク
45
平均マージ
13日 14時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nativewind/react-native-css のほかの issue

nativewind/react-native-css の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。