react-native: Placeholder's TextInput breaking lines after change on Android
Description
When component start, works fine. After change value from <TextInput />
and delete it, the placeholder appears, passes 1 second and it break line.
React Native version:
OS: macOS 11.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 102.36 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.5.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.3.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.3/12C33 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_242-release - /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
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
- Access snack and set Android
- Type on TextInput to disappear placeholder
- Break placeholder
Expected Results
Placeholder not break line after disappear
Snack, code example, screenshot, or link to a repository:
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 8
- Comments: 17 (1 by maintainers)
Was able to repro in the snack.
Initial state
Type something
After deleting the text you just typed, the placeholder text no longer respects
numberOfLines
Adding a
flex: 1
with my ‘width’ parameters to the style of the TextInput seems to correct the issues in my case.Hi, I’m also running into this issue. Any updates on this by chance?
I don’t know if it helps others in the meantime, but I found by forcing the minWidth of the input to be large than to contentSize of the placeholder. For me, that ended up ‘95%’ of the container width (to account for padding). It was not the most ideal solution, but it was the simplest trying to resolve it until this was actually addressed.
It is also appear on Android version 10 (real device Samsung A7). React native version 0.64.2
Previously, the TextInput shows: “This is a tex…”. But now, the placeholder has multiple lines, which break the App’s UI
same here
anything update?
Since this does repro in Expo, is the problem that Expo is lagging behind on Android SDK maybe?
Still encountering this issue with longer placeholder text
If placeholder text is contained within input it looks fine
Typing within the text input works as expected
I am also having this issue. Any updates here?