React Native Text Input Has Hidden Padding On Android

Question

I have the following code which is used to put a text label right next to a text input inline:

  <View style={{ flexDirection: "row", alignItems: "center" }}>
      <Text
        style={{ fontSize: 16, backgroundColor: "green" }}
      >
        🇺🇸 +1{" "}
      </Text>
      <TextInput
        style={{
          fontSize: 16,
          backgroundColor: "red",
          flex: 1,
        }}
        placeholder="Enter your phone number"
      />
    </View>

As you can see, I put them in a flex row view, aligning them to the center. For some reason, on Android, you can see the text input has a larger height, despite having the same font size.

There seemed to be some kind of hidden padding so I tried adding padding: 0 but that didn't work either. On iOS, they are the exact same height. Any idea of what I can do here?

To be clear, I want them to be the same height on Android as iOS correctly does. Thank you for your help.

Answer 1

You may add paddingVertical: 0 to style. This will reset the Android native module padding.

<View style={{ flexDirection: "row", alignItems: "center" }}>
  <Text
    style={{ fontSize: 16, backgroundColor: "green" }}
  >
    🇺🇸 +1{" "}
  </Text>
  <TextInput
    style={{
      fontSize: 16,
      backgroundColor: "red",
      flex: 1,
      paddingVertical: 0
    }}
    placeholder="Enter your phone number"
  />
</View>

Result

Source: https://stackoverflow.com/a/37882782/20002061