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