react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Unnecessary Linebreak when content is as wide as text-component

Open Ainias opened this issue 3 years ago • 0 comments

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

Ainias avatar Oct 27 '22 08:10 Ainias