TextInput wraps text instead of showing ellipsis #21969
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
CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 369.40 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/opt/node@8/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 25.0.3, 26.0.2, 27.0.1, 27.0.3, 28.0.2, 28.0.3
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.18 => 16.4.18
@types/react-native: 0.57.3 => 0.57.3
react: ^16.5.0 => 16.5.0
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
react-native-git-upgrade: 0.2.7
Description
When a user types directly into a TextInput and overflows the width, then blurs, the content wraps instead of an ellipsis being added. Content is ellipsisized correctly if it's set programatically. Adding vertical padding can hide the wrapping content, but the ellipsis is still missing.
In the screenshots (and demo) the first input has numberOfLines={1}, the second doesn't, the third has paddingVertical: 0, the fourth has paddingVertical: 20.
| 1 | 2 | 3 | 4 |
|---|---|---|---|
 |
 |
 |
 |