How to centralize text in React Native TextInput?

Sometimes, we want to centralize text in React Native TextInput.

In this article, we’ll look at how to centralize text in React Native TextInput.

How to centralize text in React Native TextInput?

To centralize text in React Native TextInput, we can set the textAlign prop to 'center'.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ padding: 30 }}>
      <TextInput textAlign="center" placeholder="Your Account" />
    </View>
  );
}

to set the textAlign prop to 'center' to make the placeholder and input value centered on the screen.

Conclusion

To centralize text in React Native TextInput, we can set the textAlign prop to 'center'.