Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transform origin center results in transformation relative to the top left corner #2361

Open
MatiPl01 opened this issue Jan 24, 2025 · 1 comment
Labels
bug Something isn't working Needs: Triage 🔍

Comments

@MatiPl01
Copy link

Environment

react-native -v: 0.76.5
npm ls react-native-macos: 0.76.6
node -v: v20.10.0
npm -v: 10.2.3
yarn --version: 1.22.22
xcodebuild -version: Xcode 15.4

Steps to reproduce the bug

  1. Add transform: [{ rotate: '45deg' }] (or similar rotation) to any view style,
  2. Observe that the view rotates around the top-left corner,
  3. Set transformOrigin to bottom right,
  4. Observe that now the view rotates around the center

Expected Behavior

The transformOrigin should be properly placed and rotation should be applied relative to the transformOrigin.

Actual Behavior

The view rotates around wrong origin.

Reproducible Demo

I just added rotation animation with react-native-reanimated to the entire section in the starter app. It should rotate around center.

Screen.Recording.2025-01-24.at.15.04.18.mov

Additional context

Similar issue was reported before: #1891

@Saadnajmi
Copy link
Collaborator

So the transform origin prop is still off, thanks! I thought I had fixed this, but it may have regressed when transform origin was added to React Native as a prop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Needs: Triage 🔍
Projects
None yet
Development

No branches or pull requests

2 participants