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

[magrinj]

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:

After:

[callstack-bot]

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

[magrinj]

@brunohkbx @jbinda Any news on this ?

[brunohkbx]

@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]

@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]

@brunohkbx Any news on this ?

[brunohkbx]

@magrinj sorry for taking so long to answer.

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

iOS

Before	After

Android

Before	After

[brunohkbx]

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

[magrinj]

@brunohkbx Perfect ! Thanks for the fix 🙂

[aviran3369]

Hi,

When this fix will be updated on NPM?