microsoft / microsoft/react-native-windows
React Native occasionally truncates text
Nobody has claimed this yet.
- 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
- Copy app from Gist here: https://gist.github.com/rozele/7a8704a69ff548613407c0f9fb72257b
- 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
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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