react / react/react-native

【RN v0.71.10】Text doesn't show all content on Android(some devices)

Offen
#37,764 6 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: Text Issue: Author Provided Repro Needs: Attention Platform: Android
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

Init a new project, just add Text component to show some texts on Android. The Text doesn't show all content for Japanese with custom font fontFamily--BarlowCondensed-Regular on Android(some devices only) such as OPPO K9x 5G.

React Native Version

0.71.10

Output of npx react-native info

➜ newrnversion npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 86.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.4.0 - /opt/homebrew/bin/npm
    Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.10 => 0.71.10 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce
  1. Init a new project using npx react-native init newrnversion.
  2. Create a font directory assets/fonts inside newrnversion/android/app/src/main.
  3. Add a custom font BarlowCondensed-Regular file to newrnversion/android/app/src/main/assets/fonts.
  4. Edit App.tsx file, adds a Text component with Japanese.
  5. Sets the fontFamily as BarlowCondensed-Regular.
  6. Run android only.
  7. The content in Text does not show incomplete.
Snack, code example, screenshot, or link to a repository

Codes

import React from "react";
import { Text, View } from "react-native";
import { Header } from "react-native/Libraries/NewAppScreen";

function App(): JSX.Element {
  return (
    <View>
      <Header />
      <Text style={{
        fontSize: 16,
        backgroundColor: "red",
        marginTop: 200,
        alignSelf: "center",
        textAlign: 'center',
        fontFamily: "BarlowCondensed-Regular"
      }}>
        番号を変更
      </Text>
    </View>
  );
}

export default App;

Screenshot

截屏2023-06-08 11 18 25

fontsize

Actual behaviour

The text does not align center and the content shows incomplete. It seems that it's cut off and moves down!

Expected behaviour

The text aligns center and the content shows complete. For example:

fontSize2

However, if I sets lineHeight: 20 like

<Text style={{
  fontSize: 16,
  backgroundColor: "red",
  marginTop: 200,
  alignSelf: "center",
  textAlign: 'center',
  fontFamily: "BarlowCondensed-Regular",
  lineHeight: 20, // here!
}}>
  番号を変更
</Text>

Everything works well on all devices! But I think we shouldn't always set lineHeight to avoid this problem. It should be a bug on Android. Any ideas or how to fix it using a efficient way?

At last, the font file(BarlowCondensed-Regular) can be downloaded via the link: BarlowCondensed-Regular.

Any help will be appreciated.

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

Beginne damit, das Problem aus App.tsx mit der Schriftart in android/app/src/main/assets/fonts auf einem betroffenen Android-Gerät wie dem OPPO K9x 5G zu reproduzieren. Vergleiche die Darstellung von Japanese Text mit und ohne lineHeight: Die Arbeit ist abgeschlossen, wenn der Inhalt vollständig sichtbar und zentriert ist, ohne lineHeight zu benötigen.

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.