Search code examples
androidreact-nativetextinput

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.

Solution

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