How to align text input content to the top in React Native?

Sometimes, we want to align text input content to the top in React Native.

In this article, we’ll look at how to align text input content to the top in React Native.

How to align text input content to the top in React Native?

To align text input content to the top in React Native, we can set the textAlignVertical styles property to true.

For instance, we write:

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

const App = () => {
  return (
    <View>
      <TextInput
        style={{
          flex: 1,
          width: '100%',
          height: 150,
          border: '1px solid black',
          textAlignVertical: 'top',
        }}
        multiline
        numberOfLines={10}
      />
    </View>
  );
};
export default App;

to set textAlignVertical to 'top' in the styles object to make the inputted text align to the top.

Conclusion

To align text input content to the top in React Native, we can set the textAlignVertical styles property to true.