How to align text input correctly in react native?

TextInput has default padding, override it by setting:

paddingTop: 0,
paddingBottom: 0

Github Issue

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

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

Give textAlignVertical : "top" that will solve your issue.

<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />

It worked for me (RN 0.61.5):

<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />

I had a similar use case in my iOS app, wherein the TextInput's height was 100 and the placeholder was showing in middle. I used multiline={true} and it made the text appear from the top.

Update 2015-07-03: multiline text inputs have now been merged:

https://github.com/facebook/react-native/pull/991

The multiline examples that ship with React Native in the UI Explorer should work as documented.

The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:

https://github.com/facebook/react-native/issues/279

"We haven't ported that functionality to open source yet."

There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.

I found out per element inspector, that for iOS there is a paddingTop: 5 for multiline TextInputs. This was still applied even though I set paddingVertical: 15 for all of my inputs. The result was a not centered text in multiline inputs on iOS. The solution was to additionally add a paddingTop: 15 if the TextInput is multiline and the platform is iOS. Now there is visually no difference between single line and multiline inputs on both platforms, Android and iOS.

Apparently the solution for iOS is not as trivial as one might think.

While on Android you can just add this style:

paddingTop: 0,
paddingBottom: 0,

On iOS you'd need this:

multiline={true}

But what if you want a single line? This is my workaround:

<TextInput
   value={comment}
   onChangeText={setComment}
   {/*The lines below are the important ones*/}
   multiline={true}
   blurOnSubmit={true}
   autoCorrect={false}
   onSubmitEditing={handleOnSubmit}
/>

Let me explain what's happening here:

1. As we said, multiline={true} vertically aligns the text.
2. To avoid adding a new line after pressing the submit button, you need blurOnSubmit={true}. This also closes the keyboard and although in my case that's ok, I haven't figured a way around it, unfortunately.
3. I used autoCorrect={false} because without it, the submit button will change the TextInput's value to the automatically selected suggestion (if any).
4. Finally, if you want to perform some action when the submit button is pressed, then you need onSubmitEditing={handleOnSubmit}.

What a journey to just align a text...

import {TextInput, Dimensions} from 'react-native';

const {height, width} = Dimensions.get('window'); 


<TextInput 
style={{ borderWidth:1, borderRadius:10,minHeight:100, textAlignVertical: 'top',
 width: width-20,paddingHorizontal:10,  }}
          placeholder={"Enter Email ID "}
          multiline          
        />

Just Incase you are looking for code:

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>

For those using nativewind, I avoided that the decenders got cutted by playing with the lineheight property. I.e. For me adding the class leading-5 works well.

import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

// ...
intext: {
    height:screenHeight - 10,
    textAlignVertical: 'top',
    fontSize:17,
    padding:12,
    fontFamily:'courier',
    margin:10,     
},

I think it's default for iOS, for android in my case adding paddingVertical: 0, to text style worked.

To get text aligned vertically center on both platforms use:

For android use textAlignVertical: "center"

For ios use justifyContent: "center"