How to write from left, center or right side of input field in React Native?

There could be the use cases where you want the users to write from center of the input field; Like entering the OTP code. Similarly from right side too.

To create this functionality, we need to use textAlign prop of TextInput component in React Native. The possible values of this prop are – left, center and right.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View, Text } from "react-native";

const ChangeAlignmentTextInput = () => {
  const [text, onChangeText] = React.useState("https://akashmittal.com");

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>{`textAlign={'left'}`}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          textAlign={'left'}
        />

        <Text>{`textAlign={'center'}`}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          textAlign={'center'}
        />

        <Text>{`textAlign={'right'}`}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          textAlign={'right'}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 40
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default ChangeAlignmentTextInput;

Output –

From the above image you can see how textAlign prop changed the alignment of text within input field. Both iOS (left) and Android (right) are showing the same output.

In the code we are setting textAlign={'left'} at line number 15. For other input fields we are setting center and right at lines 23 and 31 respectively.

Live Demo

Conclusion

You can change the alignment of text in input field by setting textAlign prop to any of these values – left, center and right.