TextInput component does not support textAlign property

[abumalick]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

The TextInput component in react native has a textAlign prop that seems to not work in react native web:

https://reactnative.dev/docs/textinput.html#textalign

Expected behavior

The text and placeholder should be centered when textAlign prop is set

Steps to reproduce

import { Text, SafeAreaView, StyleSheet, TextInput } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>
        This shows that the TextInput textAlign prop does not work properly on web.
        The text is not centered:
      </Text>
      <TextInput 
        textAlign="center"
        style={styles.input} 
        placeholder="Placeholder" 
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'left',
  },
  input: {
    marginLeft: 'auto', 
    marginRight: 'auto',
    padding: 10,
    width: '90%',
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: "#000"
  }
});

Test case

https://codesandbox.io/s/textinput-textalign-does-not-work-tg5chn?file=/src/App.js

Additional comments

You can see that it is working properly on native in snack: https://snack.expo.dev/@abumalick/textinput-textalign-not-working

Please note that when clicking on the TextInput on iOS, the cursor is appearing on the left of the placeholder. (I think it is a bit tricky to achieve the same on web, right?)

[necolas]

You should use the textAlign style property instead. That works across all platforms.

[abumalick]

Thank you for the quick answer @necolas.

It is true that textAlign in style works for all platform and have the same behavior than the prop on android and iOS as far as I know. But as the prop is there in TextInput, I would expect it to work on web or to give some warning in console that this is not supported.