facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119k stars 24.32k forks source link

Unnecessary Linebreak when content is as wide as text-component #35097

Closed Ainias closed 6 months ago

Ainias commented 2 years ago

Description

When the content of a text-component has the same width as the text-component itself, it can lead to a line break which leads to an empty line.

Version

0.70.4

Output of npx react-native info

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 54.20 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2022.08.22.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/sguenther/.gem/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0, 33.0.0, 33.0.0
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-32 | Google APIs ARM 64 v8a, android-32 | Google APIs Intel x86 Atom_64, android-32 | Google Play ARM 64 v8a, android-32 | Google Play Intel x86 Atom_64
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.4 => 0.70.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Add

 <Text style={{
                backgroundColor: "blue",
                fontSize: 13,
                fontWeight: 'bold',
                maxWidth: Platform.OS === 'ios' ? 112.4 : 103.4
            }}>
                Klaus-Peter Buck
 </Text>

to your project

Then use the emulator Pixel XL with API 30 or iPhone 11 with iOS 14.0 to display the component. It should be using two lines, while the text is only filling one line.

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

https://github.com/churchtools/RNN-Text-Linebreak

WayneWang98 commented 1 year ago

Same issue, does anyone have a solution ?

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Ainias commented 1 year ago

+1

liegsalz commented 1 year ago

+1

github-actions[bot] commented 6 months ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Ainias commented 6 months ago

This does not happen anymore with the Pixel XL API 30 emulator. I'm closing this for now.