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
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
Description
If use
measuremethod to calculatex, y, width, height, pageX, pageYvalues ofViewit will return incorrect values in case if parentViewhas styles:in this case
width, height, pageX, pageYvalues frommeasurecallback will be doubled compared to real ones.Specs
transformstyle prop doesnt change layout,transformis used to change appearance only:react-native-webwheretransformdoesnt affectwidth, height, pageX, pageYvaluesonLayoutcallback which will returnwidth, heightNOT scaledProblem
There are 3 different behaviors:
react-native-webreturns real sizesonLayoutreturns real sizesmeasurereturns size SCALED due to its parenttransformstyleSteps 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 infoStacktrace or Logs
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:
Android / iOS console logs (3rd and 4th parameters for
measureare 2x bigger than fromonLayout):