React-native: TextInput wraps text instead of showing ellipsis

[apexskier]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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 |
| ------ | ------ | ----- | ----- |
| | | | |

Reproducible Demo

https://snack.expo.io/@apexskier/text-wrapping

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[apexskier]

editing to [skip envinfo] didn't seem to work

[kelset]

👋
I just tested your repro code and it doesn't look like the issue it still present on version 0.59 - so I'm going to close this issue.

Please let me know if it still happens to you, here's my screenshot:

[christopher-18]

This issue still persists in android for rn version 0.59

[borm]

"react-native": "0.59.9"
keyboardType="email-address"

Still reproduce

[AntonisFK]

Looks like this issue is related to https://github.com/facebook/react-native/issues/14845

[mwilson71]

I've run into this and tested it pretty extensively on iOS. It seems like it is actually related to iOS version. I do not see the behavior on iOS 10.3 devices, those place ellipsis at the end of the text as expected. On iOS 11, 12, and 13 devices however, I see this new, broken behavior where the text wraps instead of staying on a single line. This is running the same exact RN code, consisting of a single TextInput box. This is with React Native 0.61.5