How to customize height of a React native TextInput?

user_14897787 0
Viewed 298

I changed the height of my TextInput but on android the input itself stays in the middle. How can I change it so the text start on the top of the box? This is how it looks on android


textInput: {
        borderWidth: 1,
        borderColor: "rgba(199,218,228,1)",
        borderRadius: 8,
        height: 312,
        paddingTop: 8.21,
        paddingBottom: 8.21,
        paddingHorizontal: 16,
        fontFamily: "FiraSans-Regular",
        fontSize: 14,
    },
react-native reactjs
1 Answers

textAlignVertical should help you out here, the component's default behavior is to center the text within the input.

If you add:

textAlignVertical: 'top'

to your style it should bring the input to the beginning. The information is kinda hidden in the docs under the multiline prop: https://reactnative.dev/docs/textinput#multiline

multiline

If true, the text input can be multiple lines. The default value is false. It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.

user_29239290
Related