TextInput placeholder is always multiline on Android
See original GitHub issueDescription
On Android, the <TextInput>
's placeholder
property always renders to multiple lines, whereas on iOS it trails the ending (like ellipsizeMode="trail"
).
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.
- Create
<TextInput>
component - 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=""
/>
Issue Analytics
- State:
- Created 3 years ago
- Reactions:10
- Comments:10 (1 by maintainers)
Top Results From Across the Web
Position of placeholder text in (multiline) TextInput for Android ...
On Android, it's putting the placeholder text as centered vertically! I've checked and there are no styles in any parent component that would ......
Read more >TextInput - React Native
multiline If true , the text input can be multiple lines. The default value is false . It is important to note...
Read more >Multi-line text input — Toga 0.3.0.dev39 documentation
Android. Web. y. The Multi-line text input is similar to the text input but designed for larger ... placeholder (str) – The placeholder...
Read more >TextInput · React Native Paper
A component to allow users to input text. ... Placeholder for the input. error. Type: boolean ... The number of lines to show...
Read more >textinput · React Native 中文网 - papahot
此回调函数当软键盘的`确定`/`提交`按钮被按下的时候调用此函数。如果 multiline={true} ,此属性不可用。 placeholder string #. 如果没有任何文字输入 ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I created a PR for this here: https://github.com/facebook/react-native/pull/29664
I am also still seeing this issue on
0.63.4