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

transformOrigin produces incorrect results on android #49286

Open
thirteenthstep opened this issue Feb 8, 2025 · 0 comments
Open

transformOrigin produces incorrect results on android #49286

thirteenthstep opened this issue Feb 8, 2025 · 0 comments
Labels
API: Transforms Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications.

Comments

@thirteenthstep
Copy link

Description

Transforming a view with perspective and transformOrigin to achieve 3d-effects is working perfectly on iOS, but not on android.

This has probably something to do with the normalization of camera perspectives:

I would be very thankful for possible workarounds.

Steps to reproduce

  1. Create a RN App using cli or Expo
  2. Add a View which is transformed with origin and perspective

const {width, height} = Dimensions.get('window');

export default function App() {
  return (
    <View
      style={{
        width,
        height,
        backgroundColor: 'red',
        transformOrigin: [0, height / 2, 0],
        transform: [
          {perspective: width},
          {rotateY: '45deg'}],
      }}>
      <Text>test</Text>
    </View>
  );
}```

### React Native Version

0.77.0

### Affected Platforms

Runtime - Android

### Output of `npx react-native info`

```text
System:
  OS: macOS 15.3
  CPU: (14) arm64 Apple M3 Max
  Memory: 101.89 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.4.0
    path: ~/.nodenv/versions/21.4.0/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nodenv/versions/21.4.0/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nodenv/versions/21.4.0/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Users/take/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

no stacktrace

Reproducer

https://snack.expo.dev/TUuheLubQqqLvtaHBxTR8

Screenshots and Videos

iOS: Image android: Image

@react-native-bot react-native-bot added the Platform: Android Android applications. label Feb 8, 2025
@shubhamguptadream11 shubhamguptadream11 added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. API: Transforms and removed Needs: Triage 🔍 labels Feb 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API: Transforms Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications.
Projects
None yet
Development

No branches or pull requests

3 participants