How do I set the initial position of the textinput cursor to the top-left corner

Question

I got a TextInput that for some reason has it initial start point on the middle like the image suggests:

I suspect that the textinput thinks that the first line starts there, but i cent figure out how to tell it otherwise

I would like it to start in the top left corner.

This is what the code looks like:

<View style={styles.desc}>
     <Text style={styles.text}>Beskrivelse:</Text>
     <TextInput style={styles.desctextinput}
                multiline={true}
                onChangeText={(newText) => {
                     let obj = this.state.data;
                     obj.description = newText;
                     this.setState({data: obj});
                }}
                onBlur={() => {
                     console.log(this.state.data.description)
                }}
                />
</View>
const styles = StyleSheet.create({
    text: {
        fontSize: 16,
        fontWeight: 'bold'
    },
    desc: {
        flexDirection: 'column',
        paddingVertical: 10,
        paddingHorizontal: 15,
        height: 300
    },
    desctextinput: {
        flex: 1,
        borderWidth: 1,
        paddingTop: 5,
        paddingLeft: 5,
        borderColor: '#f7f7f7'
    }

});

Answer 1

You can easily fix that by adding:

textAlignVertical: 'top'

to your desctextinput style.