React Native multi line TextInput, text is centered

Question

So when using, text input with multiline=true, I have this issue where the text is vertically centered instead of being pushed to the top.

This issue happens on both ios and android, except android has another issue where, when multiple lines are entered, they get letterboxed to the height of 1 line.

I'd like to point out, I have tried adding textAlignVertical: 'top' to the style of the textinput

Code: (I have this as a seperate copmonent as I use it in forms with form text but all parameters are passed something)

    <TextInput
            style={styles.input}
            value={value}
            autoComplete={autoComplete}
            autoCapitalize={autoCapitalize}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
            keyboardType={keyboardType}
            returnKeyType={returnKeyType}
            autoFocus={autoFocus}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            multiline={multiline || false}
            ref={(r) => { inputRef && inputRef(r); }}
    />

styles:

input: {
    paddingRight: 10,
    lineHeight: 23,
    flex: 2,
    textAlignVertical: 'top'
},

ios screenshot

android screenshot

are you try to give height in style tag in textinput..? or provide me the code you tried .... — chetan godiya, Jun 22 '18 at 10:37
@chetangodiya do you have any ideas for a solution? No-one's solved it :( — Red, Jun 25 '18 at 14:37
i tried and add answer may be you should try and let me know if it is correct or not... — chetan godiya, Jun 26 '18 at 09:37
Looks like now on `iOS` it will be set on `top` automatically and for `Android` you can use `textAlignVertical: 'top'` https://reactnative.dev/docs/textinput#multiline — Velizar Andreev Kitanov, Sep 29 '21 at 07:56

score 79 · Answer 1 · answered Feb 14 '19 at 09:57

79

If anyone facing the same issue, try textAlignVertical: "top" This works. For more info try https://github.com/facebook/react-native/issues/13897

answered Feb 14 '19 at 09:57

Subhendu Kundu

3,618
6
26
57

3

It is for Android only. It's not working in iOS sadly. – Luvnish Monga Feb 14 '20 at 06:43

score 19 · Answer 2 · answered Jun 26 '18 at 05:18

i tried this for you please let me know if its correct

 <TextInput
            style={styles.input}
            value={this.state.value}
            onChangeText={text=>this.setState({value:text})}
            multiline={true}
            underlineColorAndroid='transparent'
    />

style as

  input: {
    width:200,
    borderBottomColor:'red',
    borderBottomWidth:1,
},

and expo link may be help you click here

Red · Accepted Answer · 2018-06-28T11:13:19.207

3

So it turned out the View surrounding the textinput had alignItems: 'center' which centered the text within the text input.

So changed that to alignItems: this.multiline ? 'flex-start' : 'center',

Also for the android issue, I had to add numberOfLines={5} which fixed the letterboxing

edited Jun 28 '18 at 11:13

answered Jun 28 '18 at 08:57

Red

393
2
5
9

score 1 · Answer 4 · answered Jul 31 '20 at 13:07

1

Setting the multiline prop solved the problem.

   <TextInput
        style={styles.input}
        value={this.state.value}
        onChangeText={text=>this.setState({value:text})}
        multiline={true}
        numberOfLines={4}
   />

answered Jul 31 '20 at 13:07

Colin Wang

6,778
5
26
42

score 0 · Answer 5 · answered Aug 11 '22 at 02:24

0

in my case:

 textAlignVertical: multiline ? 'top' : 'center',

answered Aug 11 '22 at 02:24

Hung Nguyen

11
2

React Native multi line TextInput, text is centered

5 Answers5