Repository navigation
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
Memory: 1.61 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 20.0.0, 22.0.1, 23.0.3, 24.0.3, 25.0.2, 26.0.3, 27.0.3, 28.0.3
API Levels: 22, 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
@storybook/react-native: 4.0.0-alpha.7 => 4.0.0-alpha.7
@types/react: ^16.3.16 => 16.3.16
@types/react-native: ^0.55.17 => 0.55.17
react: ^16.4.1 => 16.4.1
react-native: 0.57.7
npmGlobalPackages:
react-native-cli: 2.0.1
Description
Certain phrases won't fully break the word to a new line, instead, it breaks the word leaving some letters behind. Using flexWrap, flexShrink doesn't change anything. Tried several fixes but the result is the same. Indeed some phrases do not break the words properly.
Reproducible Demo
The following phrase will break the words properly:
<View style={{flex: 1}}>
<Text>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s
</Text>
</View>
And the result will be the expected, even if you remove some words or letters they will break properly (the whole word) to a new line.
But the following phrase won't break the words as expected:
<View style={{flex: 1}}>
<Text>
Animal animal animal animal animal animal animal animal animal animal animal
</Text>
</View>
This example will break the words leaving some letters behind in the previous line.
If I add random letters to any of these words they still break leaving some letters behind.
Even if I had flexWrap or flexShrink nothing changes.
Activity
react-native-bot commentedon Nov 28, 2018
jsaraiva commentedon Jan 3, 2019
Have you tried adjusting the textBreakStrategy prop in your Text element?
https://facebook.github.io/react-native/docs/text#textbreakstrategy
stale commentedon Aug 2, 2019
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
stale commentedon Aug 9, 2019
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.