Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Centered TextInput clipped #23549

Closed
Bardimaswift opened this issue Feb 20, 2019 · 4 comments
Closed

Centered TextInput clipped #23549

Bardimaswift opened this issue Feb 20, 2019 · 4 comments
Labels
Bug Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. Priority: Mid Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@Bardimaswift
Copy link

🐛 Bug Report

Focused and centered TextInput clipped on iOS when the height is greater than 54

To Reproduce

Add centered TextInput (see example) and focus it on iOS.

Expected Behavior

TextInput should be not clipped

Code Example

https://snack.expo.io/@bardiaswift/centered-textinput-issue

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
Memory: 37.52 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.14.1 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5264788
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.5 => 0.58.5
npmGlobalPackages:
react-native-cli: 2.0.1

@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Feb 20, 2019
@JKCooper2
Copy link

Seems to be an issue relating to the height and fontsize, clipping occurs not just at that value, but seemingly any time you have the height a bit larger than the font size.

More minimal example:
https://snack.expo.io/@jkcooper/centered-textinput-issue

@michalchudziak
Copy link
Contributor

michalchudziak commented Mar 19, 2019

NOTE: Currently it happens only while there is no fixed width on the input and height exceeds the font size. It must be something with RCTUITextField implementation, RCTUITextView seems to work fine in these circumstances.

Temporary workaround: Use multiline={true} prop on component to fallback to RCTUITextView.

@stale
Copy link

stale bot commented Aug 2, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 2, 2019
@stale
Copy link

stale bot commented Aug 9, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 9, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. Priority: Mid Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

6 participants