How to align text input correctly in react native?

Solution 1:

I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical that fixes this issue on multiline inputs.

i.e. textAlignVertical: 'top'

Solution 2:

TextInput has default padding, override it by setting:

paddingTop: 0,
paddingBottom: 0

Github Issue

Solution 3:

I have found the solution that in Android, TextInput style textAlignVertical: 'top' works. but in ios, TextInput prop multiline={true} works.

Solution 4:

The Above Answers either give the for iOS or android, which can be quite misleading so this fixes it for both of the platfoms.

<TextInput
style={{
flex: 1,
width: "100%",
height: 150,
color: "#FFF",
textAlignVertical: "top", // android fix for centering it at the top-left corner 
}}
multiline={true} // ios fix for centering it at the top-left corner 
numberOfLines={10}
/>

For Android -

style={{
//...
flex:1,
textAlignVertical: "top", // android fix for centering it at the top-left corner 
//...
}}

For iOS, add multiline={true} to the <TextInput/> component