React-native-paper: TextInput with transparent background

[luissmg]

Current behaviour

When you set the TextInput component to have a transparent background color, the spaces still persist.

Expected behaviour

I check MD and they don't mention anything like this.
I was thinking that when the TextInput has a transparent background, the horizontal spaces on the input should be removed.
I don't actually know if it is supposed to have a transparent background on MD's input. I just had a case where I needed it and the spaces were there.

Screenshots (if applicable)

The background is from my app. Input has no background color.

Your Environment

| software | version
| --------------------- | -------
| ios or android | both
| react-native | 0.55.4
| react-native-paper | 2.0.1 (latest)
| node | 8.11.3
| npm or yarn | 6.4.1

[jsp3536]

I would second that this would be a nice addition

[raajnadar]

+1 the textinput looks ugly when the background is transparent

[luissmg]

I wanted some feedback from the team. What do you think of this @satya164?

[luissmg]

@ferrannp What kind of investigation do you need?

[ferrannp]

I think when background is transparent, TextInput should be like in v1. Which is as your screenshot but the bottom underline to be aligned with text. An option to remove the bottom underline should be there too (or make it transparent too).

[gawrysiak]

I wouldn't really go for changing the paddings based on backgroundColor setting. It's somehow breaking and also hard to understand why one attribute affects another. This way if padding set to 0, should it change the background to transparent?

One of the ways is to first tackle #791 and then create a new TextInput mode, called maybe "legacy" or "v1" (or TextInput.Legacy). It doesn't really go by the recent guidelines, but it's a highly requested feature and still works visually, even with projects using the new MD. With #791 finished, it won't create any more mess inside the TextInput component.

The other way I'd really prefer here is to go back to the drawing board and work on a decent customizations system to be released for 3.0. Such simple case should be possible by just setting the background & padding. Should also allow fontSize, so it can cover probably the number 1 requested feature 😄

[hussainahmad]

Is there any workaround to get this feature, Much needed.

[Trancever]

Fixed in #1018

[abhiburk]

padding property doesn't seems to work for me
Error while updating property 'padding' in shadow node type:AndroidTextInput
null
Unknown value: 'none'

[questionablequestion]

@abhiburk You have to install 3.0.0-alpha.2 if you want to use it right now

[pixelize]

Is is possible to achieve that in the 2.16 version ? Haven't found a correct work around :(