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

Answer 1

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

Answer 2

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