Skip to content

Last Character Randomly Missing in <Text> Component #53017

Closed as duplicate
Closed as duplicate
Last Character Randomly Missing in <Text> Component#53017
Labels
Needs: AttentionIssues where the author has responded to feedback.Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)

Description

@WenBin0201
WenBin0201
opened on Aug 4, 2025

Description

On React Native 0.78.0 with react 19.0.0, we've encountered an intermittent issue where the last character inside a component is not rendered on some Android devices. This only happens occasionally and is hard to consistently reproduce.

Steps to reproduce

Users using Xiaomi and OPPO devices occasionally encounter the text clipping issue (last character missing) upon initial app startup.

During my own debugging, I was able to reproduce the issue more reliably by changing the system font size or weight in Android settings. After adjusting the font settings and returning to the app, the last character of a component sometimes disappears.

React Native Version

0.78.0

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.2
  CPU: (10) arm64 Apple M4
  Memory: 187.80 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.11.0
    path: /opt/homebrew/opt/node@23/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/opt/node@23/bin/npm
  Watchman:
    version: 2025.05.19.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK:
    API Levels:
      - "35"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
    System Images:
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13363775
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.0
    wanted: 0.78.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no

MANDATORY Reproducer

Screenshots and Videos

No response

Activity

  1. WenBin0201
    added
    Needs: Triage 🔍
    Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)
    on Aug 4, 2025
  2. react-native-bot
    added
    Needs: Author Feedback
    Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.
    on Aug 4, 2025

  3. react-native-bot commented on Aug 4, 2025

    @react-native-bot
    react-native-bot
    on Aug 4, 2025
    Collaborator

    Warning

    Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:


    You can read more about about it on our website: How to report a bug.

  4. react-native-bot
    removed
    Needs: Triage 🔍
    on Aug 4, 2025

  5. migueldaipre commented on Aug 5, 2025

    @migueldaipre
    migueldaipre
    on Aug 5, 2025
    Collaborator

    Hello @WenBin0201, thank you for reporting this, but we need a valid reproducer.

    Please use our Reproducer Template and specify the device models and how to simulate the issue.

  6. WenBin0201 commented on Aug 5, 2025

    @WenBin0201
    WenBin0201
    on Aug 5, 2025
    Author

    Since this happens on users' devices, I can only provide screenshots and cannot test it directly. However, I noticed that it looks similar to this issue:
    #50916

    Image
  7. github-actions
    added
    Needs: AttentionIssues where the author has responded to feedback.
    and removed
    Needs: Author Feedback
    on Aug 5, 2025

  8. WenBin0201 commented on Aug 5, 2025

    @WenBin0201
    WenBin0201
    on Aug 5, 2025
    Author

    I just initialized a new React Native project with version 0.80.2, and simulated the issue by increasing the system font size and weight on the device.

    After changing the font size and weight, I observed that some text (usually the last character) gets truncated or disappears, which is consistent with what my users (on Xiaomi and OPPO devices) are experiencing.

    It seems to be similar to this issue: #50916

    Unfortunately, since this mainly happens on end users' devices, I can only provide screenshots, not a full reproduction.

    2025-08-05_101942_873.mp4

  9. migueldaipre commented on Aug 6, 2025

    @migueldaipre
    migueldaipre
    on Aug 6, 2025
    Collaborator

    Closing as duplicate of #50916.

  10. migueldaipre
    closed this as a duplicateof Lines getting cut-off on Android devices with small font sizes #50916 on Aug 6, 2025

  11. milon27 commented on May 3, 2026

    @milon27
    milon27
    on May 3, 2026

    facing this on xiaomi 15

  12. SireAI commented on Sep 1, 2026

    @SireAI
    SireAI
    on Sep 1, 2026

    "Intermittent, last character, only on some devices" is the signature of a pixel-grid rounding coincidence, and I have just put up a fix for one: react-native#58270 (Yoga side: react/yoga#2016).

    roundLayoutResultsToPixelGrid rounds a node's left and right edge to the physical pixel grid independently and takes the width as the difference. A value within 0.0001 of a whole pixel counts as already on the grid, and the two edges can land on opposite sides of that tolerance — the left edge is snapped up while the right edge is floored, leaving the box one physical pixel narrower than the text measured. ReactTextView re-breaks the text at the width it is mounted with, so that one pixel costs the whole trailing glyph.

    That explains the "intermittent and hard to reproduce" part: the shortfall needs the node's absolute left edge to fall inside a window whose width is only as large as the gap between the measured width and the next whole pixel. Any change to an ancestor's fractional offset moves it in or out. It also requires a non-integer pointScaleFactor — Xiaomi at 440 dpi is 2.75, which is where I reproduced it.

    One caveat specific to this report: you mention that changing the system font size or weight makes it reproduce more reliably. That points at #57950 instead, where Android measures with Typeface.DEFAULT while rendering uses the system typeface, so the measured width is too small when the system font is bolded or replaced. Same symptom, different layer, and the two are independent. If your users hit it on a fresh start without touching font settings, the rounding fix is the more likely one; if it only shows up after changing font weight, #57950 is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: AttentionIssues where the author has responded to feedback.Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions