react-native
react-native copied to clipboard
Unnecessary Linebreak when content is as wide as text-component
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