Dominic Tobias Dominic Tobias - 1 month ago 17
Android Question

react-native TextInput displays wrong when changing height on Android

I have a TextInput with the following style:

amountInput: {
flex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
color: 'rgba(255, 255, 255, 0.9)',
},


On iOS it correctly looks like it doesn't have enough padding:

enter image description here

On Android is has enormous padding by default:

enter image description here

Not a problem - I'll set a right and left padding, and a height:

amountInput: {
flex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
height: 30,
paddingRight: 5,
paddingLeft: 5,
color: 'rgba(255, 255, 255, 0.9)',
}


Looks good on iOS:

enter image description here

But Android messes up:

enter image description here

How can I make an Android input box like the penultimate iOS screenshot? Thanks.

Answer

Android adds some default padding on top and bottom, you can reset them by adding paddingVertical: 0 to your element' style.