react / react/react-native

[Text on Android]: setting selectable to true breaks the text truncation and lineHeight on Android

Offen
#48,921 25 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Needs: Triage :mag: Platform: Android
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

I use Text component that has to contain selectable text and should be truncated if it extends the width of the parent component.
On iOS everything works fine. On Android if I set selectable={true} truncation and line height of the text are breaking.

Steps to reproduce
  1. import Text component from react-native
  2. render Text component, add selectable={true}, numberOfLines={1}
  3. the text is cut off instead of being truncated, the line height is bigger than it should be, the top of the second line of text is visible
React Native Version

0.75.4

Affected Platforms

Runtime - Android

Output of npx react-native info
-
Stacktrace or Logs
-
Reproducer

https://github.com/dariakoko/text-component-on-android

Screenshots and Videos
Image
      <View style={{width: 200}}>
        <Text style={{color: 'green'}}>default: </Text>
        <Text style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

        <Text>-------------</Text>

        <Text style={{color: 'green'}}>not selectable: </Text>
        <Text numberOfLines={1} style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

        <Text>-------------</Text>

        <Text style={{color: 'red'}}>selectable (issue): </Text>
        <Text
          selectable={true}
          numberOfLines={1}
          style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>
        <View style={{height: 20, backgroundColor: 'pink'}}></View>
      </View>

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginnen Sie mit dem verknüpften Reproducer unter https://github.com/dariakoko/text-component-on-android und untersuchen Sie das Verhalten der React Native Text-Komponente auf Android mit selectable={true} und numberOfLines={1}. Vergleichen Sie es mit den Fällen ohne Auswahl und unter iOS; abgeschlossen ist die Aufgabe, wenn auswählbarer Text auf Android korrekt abgeschnitten wird und die erwartete Zeilenhöhe beibehält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native
Bereich
mobile-dev
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.