react / react/react-native

[android] [ios] [web] `measure` returns incorrect values of `View` if its parent `View` is `scale`d using `transform` style

Đang mở
#54,988 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Needs: Triage :mag:
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

Description

If use measure method to calculate x, y, width, height, pageX, pageY values of View it will return incorrect values in case if parent View has styles:

transform: [
  {
    scale: 2,
  },
],

in this case width, height, pageX, pageY values from measure callback will be doubled compared to real ones.

Specs

  • It is wrong due docs as transform style prop doesnt change layout, transform is used to change appearance only:

    Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component

  • It is inconsistent with react-native-web where transform doesnt affect width, height, pageX, pageY values
  • It is inconsistent with response of onLayout callback which will return width, height NOT scaled

Problem

There are 3 different behaviors:

  • react-native-web returns real sizes
  • onLayout returns real sizes
  • measure returns size SCALED due to its parent transform style
Steps to reproduce

See example

React Native Version

0.81.5

Affected Platforms

Runtime - Android,
Runtime - iOS,
Runtime - Web

Output of npx @react-native-community/cli info
See example
Stacktrace or Logs
See example console logs on Android (or iOS)
MANDATORY Reproducer

https://snack.expo.dev/@sepu/rn-measure-bug-w-transform

Screenshots and Videos

web console logs (3rd and 4th parameters are the same) which is ok:

>>>>> useLayoutEffect measure x, y, width, height, pageX, pageY 134 351 71 39 134 351
onLayoutHandler layout.x, layout.y, layout.width, layout.height 134 351 71 39

Android / iOS console logs (3rd and 4th parameters for measure are 2x bigger than from onLayout):

>>>>> useLayoutEffect measure x, y, width, height, pageX, pageY 176 456 148 78 139 437
onLayoutHandler layout.x, layout.y, layout.width, layout.height 176 456 74 39

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với reproducer Snack bắt buộc và so sánh measure với onLayout trên Android, iOS và web. Truy vết hành vi đo lường dành riêng cho từng nền tảng được reproducer thể hiện; hoàn tất có nghĩa là measure báo cáo các giá trị nhất quán với layout chưa được scale và với các kết quả hiện có của web và onLayout.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react-native
Lĩnh vực
mobile-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
50/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.