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

TextInput placeholder is always multiline on Android

Open mrousavy opened this issue 4 years ago • 13 comments

Description

On Android, the <TextInput>'s placeholder property always renders to multiple lines, whereas on iOS it trails the ending (like ellipsizeMode="trail").

Screenshot 2020-08-16 at 17 05 02 Screenshot 2020-08-16 at 17 06 24

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.61 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.8.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.0, 30.0.1
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.2.6472646
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_265 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create <TextInput> component
  2. Set placeholder to anything long

Expected Results

The placeholder should leave dots at the trail, so no line wraps.

Snack, code example, screenshot, or link to a repository:

<TextInput
	style={textInputStyle}
	placeholder={"This is a test placeholder which doesn't ellipzise with trailing dots"}
	placeholderTextColor="gray"
	value=""
/>

mrousavy avatar Aug 16 '20 15:08 mrousavy

Is there any progress? I met the same problem.

gang544043963 avatar Dec 16 '20 08:12 gang544043963

I am also still seeing this issue on 0.63.4

Nualiian avatar Feb 23 '21 18:02 Nualiian

I created a PR for this here: https://github.com/facebook/react-native/pull/29664

mrousavy avatar May 23 '21 14:05 mrousavy

Is there any progress? I met the same problem.

wenchao0809 avatar Mar 10 '22 03:03 wenchao0809

Still the problem here...

montoyadamien avatar May 05 '22 20:05 montoyadamien

Current workaround I can found for now is add maxHeight: <fontsize + padding> to style prop.

bdtren avatar May 30 '22 08:05 bdtren

I got similar problem, up vote for a new prop ellipsizeMode

SaphiraNgocThuy avatar Jul 07 '22 08:07 SaphiraNgocThuy

Same issue here

minhchienwikipedia avatar Sep 12 '22 14:09 minhchienwikipedia

Still the problem here too...

Jungdaekyeom avatar Oct 11 '22 01:10 Jungdaekyeom

same issue here

Svarto avatar Dec 19 '22 14:12 Svarto

same issue here

vinhthuy2 avatar Jan 06 '23 09:01 vinhthuy2

any solution or workaround this? facing same issue

nolife08021 avatar Jan 10 '23 03:01 nolife08021

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Jul 09 '23 05:07 github-actions[bot]

This issue was closed because it has been stalled for 7 days with no activity.

github-actions[bot] avatar Jul 16 '23 05:07 github-actions[bot]

Is the issue resolved yet?

Altafk960 avatar Aug 28 '23 08:08 Altafk960

I am also facing same issue. Any solution?? Waiting for this issue to be fix. @mrousavy Any update on your PR??

NidhiHub avatar Sep 04 '23 12:09 NidhiHub

this issue is still there in 10/10/2023 !

alainib avatar Oct 09 '23 09:10 alainib

same issue here

ryskin avatar May 13 '24 13:05 ryskin

Same issue here, especially when changing the device font size

Tan2NT avatar Jun 03 '24 08:06 Tan2NT

This is still happening on RN 0.73.4

irawel avatar Jun 05 '24 07:06 irawel