microsoft / microsoft/react-native-windows

React Native occasionally truncates text

Open
#9,343 14 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Layout Area: Text bug Partner: Facebook Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

Filing this here, since I can only repro on react-native-windows right now, but I found a very peculiar case where text gets truncated when it should wrap. I believe this is a Yoga caching issue, but react-native-windows may be the best place to debug.

Steps To Reproduce
  1. Copy app from Gist here: https://gist.github.com/rozele/7a8704a69ff548613407c0f9fb72257b
  2. Resize window on the boundary of where the text would break from one line to two (very slowly and carefully, as shown in the video):

https://user-images.githubusercontent.com/1106239/148614641-78c33fc5-aad5-4f81-a8c2-5c5699794a1d.mp4

  1. Notice that, if the stars align (and presumably the Yoga node measurement caches are in the right state), the text will be truncated.
Expected Results

Text should never be truncated.

CLI version

npx react-native --version

Environment
npx react-native info
Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

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

See video and Gist above for a minimal-ish repro.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the minimal repro from the linked Gist and slowly resizing the window at the one-line/two-line boundary, using the attached video as a reference. Investigate the reported Yoga measurement-cache behavior in react-native-windows; done means the repro no longer produces truncated text while resizing.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.