search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.8k stars 24.29k forks source link

Transform (scale, rotate and skew) not working correctly on Android 8.1 and below! #46875

Open Ammar1999y opened 1 week ago

Ammar1999y commented 1 week ago

Description

I've encountered inconsistent behavior with scaling, rotation, and skewing transformations on older Android versions. Specifically, none of these transformations work on Android 7 and below, while scaling works on Android 8 and 8.1 but rotation and skewing do not. The issue seems to be resolved on Android 10 and above. Is this a known limitation or bug, and are there any documented workarounds? Screenshot_2024-10-07-19-02-34

Steps to reproduce

  1. npx create-expo-app@latest --template blank
  2. copy the code from transform doc
  3. start the app on Android 8.1 and below
  4. saw a weird behavior of scaling, rotation, and skewing

React Native Version

0.75.4

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 10 10.0.19045
  CPU: (2) x64 Intel(R) Core(TM)2 Duo CPU     E7500  @ 2.93GHz
  Memory: 975.01 MB / 7.75 GB
Binaries:
  Node:
    version: 20.11.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.21
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.2.5
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
IDEs:
  Android Studio: AI-241.18034.62.2411.12071903
  Visual Studio: Not Found
Languages:
  Java:
    version: 21.0.1
    path: /c/Program Files/Common Files/Oracle/Java/javapath/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

none

Reproducer

https://github.com/Ammar1999y/react-native-transforms

Screenshots and Videos

No response

react-native-bot commented 1 week ago
:warning: Newer Version of React Native is Available!
:information_source: You are on a supported minor version, but it looks like there's a newer patch available - 0.74.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.
react-native-bot commented 1 week ago
:warning: Newer Version of React Native is Available!
:information_source: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.
cortinico commented 1 week ago

For skew, that's a known issue:

Ammar1999y commented 1 week ago

For skew, that's a known issue:

In the issue you mention, the skew was behaved like rotate, but in my issue, it getting cut when it gets over the size of the element (you can see the image I provide)