How to align text input correctly in react native?

Javascript Problem Overview

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

Here is my css for text input:

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
    flex: 1,
    padding: 4,
    marginRight: 1,
    marginTop: 5,
    fontSize: 18,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#E6E5ED',
    backgroundColor: '#F8F8F9',
    justifyContent: 'flex-start',
    height: 150
}

Javascript Solutions

Solution 1 - Javascript

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 - Javascript

TextInput has default padding, override it by setting:

paddingTop: 0,
paddingBottom: 0

Github Issue

Solution 3 - Javascript

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

Solution 4 - Javascript

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

Solution 5 - Javascript

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" }} />

Solution 6 - Javascript

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. Hope that helps.

Solution 7 - Javascript

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.

Solution 8 - Javascript

It worked for me (RN 0.61.5):

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

Solution 9 - Javascript

Just Incase you are looking for code:

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

Solution 10 - Javascript

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,     
},

Solution 11 - Javascript

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.

Solution 12 - Javascript

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

Solution 13 - Javascript

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:

As we said, multiline={true} vertically aligns the text.
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.
I used autoCorrect={false} because without it, the submit button will change the TextInput's value to the automatically selected suggestion (if any).
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...

Solution 14 - Javascript

To get text aligned vertically center on both platforms use:

For android use textAlignVertical: "center"

For ios use justifyContent: "center"

Content Type	Original Author	Original Content on Stackoverflow
Question	Vikramaditya	View Question on Stackoverflow
Solution 1 - Javascript	user657199	View Answer on Stackoverflow
Solution 2 - Javascript	Tarik Chakur	View Answer on Stackoverflow
Solution 3 - Javascript	aseel	View Answer on Stackoverflow
Solution 4 - Javascript	user8212309	View Answer on Stackoverflow
Solution 5 - Javascript	Sukshith S	View Answer on Stackoverflow
Solution 6 - Javascript	Mahendra Liya	View Answer on Stackoverflow
Solution 7 - Javascript	Colin Ramsay	View Answer on Stackoverflow
Solution 8 - Javascript	Andrey Patseiko	View Answer on Stackoverflow
Solution 9 - Javascript	ishab acharya	View Answer on Stackoverflow
Solution 10 - Javascript	user9806259	View Answer on Stackoverflow
Solution 11 - Javascript	Daniel	View Answer on Stackoverflow
Solution 12 - Javascript	m1kelle	View Answer on Stackoverflow
Solution 13 - Javascript	Georgios	View Answer on Stackoverflow
Solution 14 - Javascript	Artur Eshenbrener	View Answer on Stackoverflow