Skip to content

origin-* classes: would you take a PR for transformOrigin now, or after 5.0? #509

Open

Description

@jeltehomminga

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.
  • I checked that React Native supports the styles I am using.
  • If using animations/transitions, I checked that React Native Reanimated supports the styles I am using.

Bug summary

More a question than a bug. We use react-native-css through the NativeWind v5 RC in our Expo app.

origin-top-left rotate-45 rotates around the center on iOS and Android, because the origin part is dropped. React Native has supported transformOrigin since 0.73, and style={{ transformOrigin: "top left", transform: [{ rotate: "45deg" }] }} rotates around the corner as expected. Checked on React Native 0.86.3, iOS 26.5 simulator and Android 17 emulator.

I saw it's listed as not supported in the RC compatibility notes, and that the v4 PR nativewind/nativewind#1126 was closed. Would you take a PR that maps the origin-* classes to transformOrigin now, or would you rather wait until after 5.0? Either is fine with me, the style prop works in the meantime.

Tailwind CSS classes

<View className="origin-top-left rotate-45" />
// style on iOS and Android: { transform: [{ rotateZ: "45deg" }] }
// expected: the same, plus a transformOrigin for the top left corner

Environment info

  npmPackages:
    react: 19.2.3 => 19.2.3
    react-native: 0.86.3 => 0.86.3
    react-native-css: 3.1.0-rc.0 => 3.1.0-rc.0
    tailwindcss: 4.1.12 => 4.1.12

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions