react / react/react-native

Extra line wrap on some Android devices on some combinations of lineHeight, letterSpacing and other related properties

Abierto
#46,436 5 comentarios 10 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Issue: Author Provided Repro Platform: Android
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

On some Android devices (for example Redmi 10C or Pixel 6 Pro) text is a measuring bug when setting both lineHeight and letterSpacing.

Some specific combinations of fontScale, lineHeight, maxFontSizeMultiplier, letterSpacing, fontFamily and also on the text causes extra line wrap.

In our case, it was possible to "fix" it by removing maxFontSizeMultiplier or letterSpacing or lineHeight.

But as a workaround we set allowFontScaling={false} and do the font scaling manually (setting fontSize and lineHeight by the fontScale).

image

Already reported https://github.com/facebook/react-native/issues/35039 but closed

Steps to reproduce
  1. Open Snack link https://snack.expo.dev/@matejkriztrezor/line-break-bug-demo
  2. Choose Android
  3. Switch to Pixel 6 Pro
  4. Launch Snack
React Native Version

0.75.2

Affected Platforms

Runtime - Android

Output of npx react-native info
System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1 Pro
  Memory: 144.11 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.2
    path: ~/.nvm/versions/node/v20.12.2/bin/node
  Yarn:
    version: 4.2.2
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v20.12.2/bin/npm
  Watchman:
    version: 2024.04.08.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/matejkriz/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Google Play ARM 64 v8a
      - android-31 | Google Play ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.2.1
    path: /Users/matejkriz/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false
Stacktrace or Logs
there is no crash, only UI bug
Reproducer

https://snack.expo.dev/@matejkriztrezor/line-break-bug-demo?platform=android

import React from 'react';
import {Text, View} from 'react-native';

export default () => (
  <View style={{flexDirection: 'row'}}>
    <Text
      style={{
        letterSpacing: 1.6,
        lineHeight: 21,
      }}>
      0123456789
    </Text>
  </View>
);
Screenshots and Videos
image

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

Ejecuta el Snack enlazado en Android, selecciona Pixel 6 Pro y comienza con el ejemplo reproducido de Text que usa lineHeight y letterSpacing. Compara las combinaciones indicadas de fontScale, maxFontSizeMultiplier, fontFamily y escalado; el trabajo está terminado cuando el salto de línea adicional ya no se produce para el reproductor en todas las configuraciones afectadas.

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

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.