React-native: TextInput's content is not center vertical

Created on 29 May 2016 · 3Comments · Source: facebook/react-native

Hi, I found the TextInput's content is not center vertical (in some android devices like HUAWEI),when the TextInput's parent sytle is{flexDirection: 'row'},
It looks like the baseline is center,and text is more upper.
textinput_bug

Locked

Source

Yorkey

Most helpful comment

I fixed the bug,this is because TextInput has default padding,
My solution is add paddingTop: 0,paddingBottom: 0,to the TextInput style.

Yorkey on 31 May 2016

👍36 🎉9 😕5

All 3 comments

I fixed the bug,this is because TextInput has default padding,
My solution is add paddingTop: 0,paddingBottom: 0,to the TextInput style.

Yorkey on 31 May 2016

👍36 🎉9 😕5

why paddingVertical not useful @Yorkey

liuyanhongwl on 14 Mar 2018

I've just encountered this bug again. The placeholders of my TextInputs where on the emulator perfectly centered, but not on my device. Adding paddingTop: 0, paddingBottom: 0 to the TextInput styles solved the problem - now, the placeholders are centered vertically on both, emulator and device.

Interesting, though, that this bug still occures (RN 0.54.2) and that setting textAlignVertical: 'center', does not help at all.

If you need further information or have questions @Yorkey just link me