CODEWITHSUNDEEP
androidiosreactjsreact-nativetextinput
Red
Red

Reputation: 463

React Native multi line TextInput, text is centered

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

Upvotes: 38

Views: 93550

Answers (7)

Prasi
Prasi

Reputation: 1

I've been struggling with the exact same issue for a while, and I just figured out how to solve it.

Setting the height style attribute increases the size of the container but aligns the text to the centre.

However, by instead setting both maxHeight and minHeight I was able to achieve the desired effect. A text box of a fixed size that aligns text to the top and allows for multiple lines.

Upvotes: 0

Olu
Olu

Reputation: 77

I just got this ok. Setting style textAlignVertical: "top" does not work. But setting as a prop of the multiline TextInput works. Use textAlignVertical= "top"

Upvotes: 0

Hung Nguyen
Hung Nguyen

Reputation: 41

in my case:

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

Upvotes: 3

Colin Wang
Colin Wang

Reputation: 6968

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

Upvotes: 1

Subhendu Kundu
Subhendu Kundu

Reputation: 3856

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

Upvotes: 92

Red
Red

Reputation: 463

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

Upvotes: 3

chetan godiya
chetan godiya

Reputation: 316

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

Upvotes: 22

Related Questions