How to align text to the top multiline TextInput with React Native?

Sometimes, we want to align text to the top multiline TextInput with React Native.

In this article, we’ll look at how to align text to the top multiline TextInput with React Native.

How to align text to the top multiline TextInput with React Native?

To align text to the top multiline TextInput with React Native, we can set the textAlignVertical style to 'top'.

For instance, we write:

import * as React from 'react';
import { TextInput, View } from 'react-native';

export default function App() {
  return (
    <View>
      <TextInput
        style={{ textAlignVertical: 'top' }}
        numberOfLines={5}
        placeholder="Text"
        multiline
      />
    </View>
  );
}

to add the multiline prop to make the TextInput a multiline input.

We set the numberOfLines to set the text input height to 5 lines high.

And we set textAlignVertical to 'top' to align the entered text to the top.

Conclusion

To align text to the top multiline TextInput with React Native, we can set the textAlignVertical style to 'top'.