fix: add support for textAlign: center on TextInput (callstack#2369)

Author: RichardLindhout

Diff for: .gitignore

@@ -62,3 +62,5 @@ CHANGELOG.md
 
 # generated by bob
 lib/
+
+.expo

Diff for: example/src/Examples/TextInputExample.tsx

@@ -417,6 +417,23 @@ const TextInputExample = () => {
             Error: Only letters are allowed
           </HelperText>
         </View>
+        <View style={styles.inputContainerStyle}>
+          <TextInput
+            label="Input with text align center"
+            style={{
+              textAlign: 'center',
+            }}
+          />
+        </View>
+        <View style={styles.inputContainerStyle}>
+          <TextInput
+            mode="outlined"
+            label="Outlined input with text align center"
+            style={{
+              textAlign: 'center',
+            }}
+          />
+        </View>
       </ScrollView>
     </TextInputAvoidingView>
   );

Diff for: src/components/TextInput/TextInputFlat.tsx

@@ -93,6 +93,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
       fontWeight,
       height,
       paddingHorizontal,
+      textAlign,
       ...viewStyle
     } = (StyleSheet.flatten(style) || {}) as TextStyle;
     const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
@@ -350,6 +351,11 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
                 fontWeight,
                 color: inputTextColor,
                 textAlignVertical: multiline ? 'top' : 'center',
+                textAlign: textAlign
+                  ? textAlign
+                  : I18nManager.isRTL
+                  ? 'right'
+                  : 'left',
               },
               adornmentStyleAdjustmentForNativeInput,
             ],
@@ -415,7 +421,6 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1,
     margin: 0,
-    textAlign: I18nManager.isRTL ? 'right' : 'left',
     zIndex: 1,
   },
   inputFlat: {

Diff for: src/components/TextInput/TextInputOutlined.tsx

@@ -92,6 +92,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
       fontWeight,
       height,
       backgroundColor = colors.background,
+      textAlign,
       ...viewStyle
     } = (StyleSheet.flatten(style) || {}) as TextStyle;
     const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
@@ -329,6 +330,11 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
                   fontWeight,
                   color: inputTextColor,
                   textAlignVertical: multiline ? 'top' : 'center',
+                  textAlign: textAlign
+                    ? textAlign
+                    : I18nManager.isRTL
+                    ? 'right'
+                    : 'left',
                 },
                 adornmentStyleAdjustmentForNativeInput,
               ],
@@ -390,7 +396,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     paddingHorizontal: INPUT_PADDING_HORIZONTAL,
     margin: 0,
-    textAlign: I18nManager.isRTL ? 'right' : 'left',
     zIndex: 1,
   },
   inputOutlined: {

Diff for: src/components/__tests__/TextInput.test.js

@@ -60,3 +60,28 @@ it('correctly renders left-side icon adornment, and right-side affix adornment '
   expect(() => getByTestId('left-affix-adornment')).not.toThrow();
   expect(toJSON()).toMatchSnapshot();
 });
+
+it('correctly applies default textAlign based on default RTL', () => {
+  const { toJSON } = render(
+    <TextInput
+      label="Flat input"
+      placeholder="Type something"
+      value={'Some test value'}
+    />
+  );
+
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('correctly applies textAlign center', () => {
+  const { toJSON } = render(
+    <TextInput
+      label="Flat input"
+      placeholder="Type something"
+      value={'Some test value'}
+      style={{ textAlign: 'center' }}
+    />
+  );
+
+  expect(toJSON()).toMatchSnapshot();
+});