react / react/react-native

Baseline alignment does not respect numberOfLines text property

Abierto
#35,276 3 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

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

Descripción

Description

This issue is Android specific.

Whenever using alignItems: 'baseline' on a container which has a text element in it with numberOfRows specified, if that text does get truncated, then the container will be as large as the (partly invisible) text is.

Version

0.70.5

Output of npx react-native info

System:
OS: macOS 12.5.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 168.17 MB / 16.00 GB
Shell: 3.3.1 - /usr/local/bin/fish
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.5.3 - /usr/local/bin/npm
Watchman: 2022.10.17.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Wrap a Text component with a View component which has flexDirection set to row and alignItems set to baseline. Make sure the text contains enough text to at least be rendered on 2 lines. Add numberOfLines with the value of 1 on that text. Notice that the container is larger than you'd expect. You'd expect it to be only 1 line high.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/LNZyYKCWg

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

Reproduce el comportamiento exclusivo de Android del Snack enlazado usando un Text dentro de una View orientada en filas, con alignItems establecido en baseline y numberOfLines establecido en 1. Rastrea el tratamiento de Android del diseño de Text y la alineación de la línea base, y luego verifica que el contenedor tenga una sola línea de alto después del truncamiento, sin cambiar el comportamiento esperado para texto sin restricciones.

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

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.