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

fix!: fix TextInput paddingOut not based on lineHeight when provided #2621

Merged
merged 1 commit into from
Jun 22, 2021

Conversation

magrinj
Copy link
Contributor

@magrinj magrinj commented Mar 24, 2021

Summary

When using a TextInput in outlined mode text can be cut on some device, especially on Android.
This is due to the fact that adjustPaddingOut is only based on fontSize, and even if you pass lineHeight in the style to avoid this, this one is not used.
So, to prevent this issue adjustPaddingOut is now based on lineHeight when this one is provided.

Test plan

Before:
Screenshot_20210324-124148

After:
Screenshot_20210324-123253

@callstack-bot
Copy link

Hey @magrinj, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

@brunohkbx brunohkbx requested a review from jbinda April 2, 2021 15:27
@magrinj
Copy link
Contributor Author

magrinj commented May 21, 2021

@brunohkbx @jbinda Any news on this ?

@brunohkbx
Copy link
Collaborator

@magrinj could you please provide a snack with the same code you used in the screenshot? Then I can use it to test your PR.

@magrinj
Copy link
Contributor Author

magrinj commented Jun 4, 2021

@brunohkbx You can try it out here on real android device, you'll see that smiley's are cut, it also sometimes happen with some fonts:

https://snack.expo.io/@magrin_j/react-native-paper-text-input-line-height-problem

To fix this current issue, my PR fix the adjustPaddingOut function that is only based on fontSize and doesn't care of lineHeight.

There is also another problem happening with latest release when you have a big roundness, the label background is cutting out the border line on top and on bottom. This other problem is not fixed in this PR, but I'll try to take a look later and create a new PR if I find a solution.

@magrinj
Copy link
Contributor Author

magrinj commented Jun 17, 2021

@brunohkbx Any news on this ?

Copy link
Collaborator

@brunohkbx brunohkbx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@magrinj sorry for taking so long to answer.

So I tested in both Android and iOS and your changes look good.

iOS

Before After
before after

Android

Before After
before after

@brunohkbx brunohkbx linked an issue Jun 22, 2021 that may be closed by this pull request
@brunohkbx brunohkbx merged commit ab20765 into callstack:main Jun 22, 2021
@brunohkbx
Copy link
Collaborator

@magrinj about the textinput border being cut out: #2786

@magrinj
Copy link
Contributor Author

magrinj commented Jun 23, 2021

@brunohkbx Perfect ! Thanks for the fix 🙂

@aviran3369
Copy link

Hi,

When this fix will be updated on NPM?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Emoji icons are cut off in outlined mode with preset height
4 participants