react / react/react-native

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

Abierto
#54,988 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Needs: Triage :mag:
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el reproductor obligatorio de Snack y compara measure con onLayout en Android, iOS y web. Rastrea el comportamiento de medición específico de cada plataforma que muestra el reproductor; se considera terminado cuando measure informa de valores coherentes con el layout sin escala y con los resultados existentes de web y onLayout.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react-native
Área
mobile-dev
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
50/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.