React-Native - TextInput cursor placed in the middle instead of top in Android

Question

I am rendering a TextInput in my react-native app which has a height of 100 px. The cursor for typing in the text is displayed in the center instead of the top in Android. The cursor appears fine for iOS. Below is a sketch which demonstrates the problem:

https://sketch.expo.io/SJVIk30ig

The TextInput is rendered using below code:

<TextInput style={{height: 100, padding: 5, backgroundColor: colorThemes.Blue.lightGrey}} 
          multiline={true}
          value={this.state.value}
          onChange={this.onTextInputChange}
          underlineColorAndroid={'transparent'}
          autoCorrect={true} autoFocus={true}
          autoCapitalize={'sentences'}
        />

Answer 1

Duplication of this question

Set style property textAlignVertical to top on the TextInput

    <TextInput style={{height: 100, padding: 5, 
      backgroundColor: colorThemes.Blue.lightGrey, 
      textAlignVertical: 'top'}} 
      multiline={true}
      value={this.state.value}
      onChange={this.onTextInputChange}
      underlineColorAndroid={'transparent'}
      autoCorrect={true} autoFocus={true}
      autoCapitalize={'sentences'}
    />

Answer 2

Just add below style to your InputText, please have a look to the code

// This is the style for InputText
        const styles = StyleSheet.create({
                inputBox: {
                    fontSize: 13,
                    color: '#404040',
                    // Setting up TextInput height as 50 pixel.
                    height: 150,
                    // Set border width.
                    borderWidth: 1,
                    // Set border Hex Color Code Here.
                    borderColor: '#404040',
                    // Set border Radius.
                    borderRadius: 5,
                    //Set background color of Text Input.
                    backgroundColor: "#FFFFFF",
                    // this for setting cursor to top
                    textAlignVertical: 'top'
                }
            });

    // here is the InputText , we are setting style



<TextInput
             multiline={true}
             style={styles.inputBox}
             placeholder={'Type here...'}
             value={this.state.text}
             onChangeText={newText => this._sendChanges(newText)}
                    />

Answer 3

Add textAlignVertical: 'top' into your <TextInput> styles

Answer 4

we can keep cursor position center using textAlign:'center'

inputstyle: {
    color: colors.white
    paddingLeft: 4,
    textAlign: 'center',
}