TextInput padding

[Polypants]

Not sure if this is a request, bug or what but jut want to point this out and ask why it's like this first.

Padding adds space to the outside of the TextInput element. Not inside, between the edges of the container and the text inside it. Seems like a bug to me but for now I guess I'm just asking why it's like that. I can't attempt to fix an issue with multiline inputs on android because of it.

Added padding doesn't increase the size of the area that the backgroundColor is applied to, as another example of what one would expect to happen.

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[p-syche]

@Polypants thanks for creating an issue.
Please make sure to add a snack which reproduces the problem you are facing.
You can read about styling the TextInput in the docs
I created an example snack with custom paddings which seem to be working as expected: https://snack.expo.dev/@p-syche/textinput-with-paddings . Can you see the problem you would like to report present in this snack?

[batmanashvili]

@p-syche @Polypants
I found this bug too, here is a snippet with bug.

https://snack.expo.dev/@bekabatmanashvili/textinput-with-paddings

[ZukaGap]

padding work like a margin, pls fix it.

[HeadJk]

@Polypants thanks for creating an issue. Please make sure to add a snack which reproduces the problem you are facing. You can read about styling the TextInput in the docs I created an example snack with custom paddings which seem to be working as expected: https://snack.expo.dev/@p-syche/textinput-with-paddings . Can you see the problem you would like to report present in this snack?

Look at the outlined textinput in your example. Padding is being applied to the outside of the input... Its acting like margin

[krschacht]

I too am grappling with this bug. @Polypants , does it make sense what HeadJK is saying? You can see the issue in your own snack. In your second example, you have an outlined text input and when you add the paddingLeft it should not move the outline. It's adding the padding outside the outline but it should add it inside the outline.

Right now the only workaround I've found is: do not use mode "outline" and instead add my own border. Visually, it doesn't look great but it addresses the padding issue. It's my workaround until this is fixed.

[krschacht]

I too am grappling with this bug. @p-syche , does it make sense what HeadJK is saying? You can see the issue in your own snack. In your second example, you have an outlined text input and when you add the paddingLeft it should not move the outline. It's adding the padding outside the outline but it should add it inside the outline.

Right now the only workaround I've found is: do not use mode "outline" and instead add my own border. Visually, it doesn't look great but it addresses the padding issue. It's my workaround until this is fixed.

[lukewalczak]

Hello, please try to install the library from the branch fix/outlined-input-padding which contains changes included in the PR (currently in draft, still need some testing) and please let me know if that fix your issue.