Home » Android » react-native TextInput displays wrong when changing height on Android

react-native TextInput displays wrong when changing height on Android

Posted by: admin May 14, 2020 Leave a comment

Questions:

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.

How to&Answers:

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