fix(text): support start and end text alignment (#57201)

Summary:
Closes #45255.

Adds `textAlign: 'start' | 'end'` support for Text and TextInput across the JS types, Android, iOS, and Fabric text conversion paths.

- Android legacy Text and TextInput now accept logical `start`/`end` alignment values.
- Fabric preserves `start`/`end` as distinct `TextAlignment` values and resolves them against layout direction for iOS paragraph layout.
- Existing `left`/`right` behavior is left unchanged to avoid changing current RTL semantics.

This replaces #57007 because the original fork became locked and could not be updated after the upstream conflict.

## Changelog:

[GENERAL] [ADDED] - Add support for `textAlign: 'start'` and `textAlign: 'end'`.

Pull Request resolved: #57201

Test Plan:
- `yarn build-types`
- `yarn test-typescript`
- `yarn flow-check`
- `./node_modules/.bin/prettier --check packages/react-native/Libraries/Components/TextInput/TextInput.d.ts packages/react-native/Libraries/Components/TextInput/TextInput.flow.js packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js packages/react-native/types/__typetests__/index.tsx packages/react-native/ReactNativeApi.d.ts`
- `./gradlew ktfmtCheck -Preact.internal.useHermesStable=true --no-daemon`
- `./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests com.facebook.react.views.textinput.ReactTextInputPropertyTest.testTextAlign --tests com.facebook.react.views.text.TextAttributePropsTest -Preact.internal.useHermesStable=true --no-daemon`
- `./gradlew ':packages:react-native:ReactAndroid:buildCMakeDebug[arm64-v8a][hermestooling,jsi,etc]' -Preact.internal.useHermesStable=true --no-daemon`
- `git diff --check`

The Android unit test and CMake checks were run from an ASCII-only temporary worktree because Kotlin unit test compilation in my main checkout fails before running these tests when the workspace path contains non-ASCII characters.

Reviewed By: christophpurrer

Differential Revision: D108628602

Pulled By: javache

fbshipit-source-id: 28111d0553451d7de0424a07e956f71bda8787ca

Author: SJvaca30

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -979,9 +979,9 @@ export interface TextInputProps
   style?: StyleProp<TextStyle> | undefined;
 
   /**
-   * Align the input text to the left, center, or right sides of the input field.
+   * Align the input text to the left, center, right, start, or end side of the input field.
    */
-  textAlign?: 'left' | 'center' | 'right' | undefined;
+  textAlign?: 'left' | 'center' | 'right' | 'start' | 'end' | undefined;
 
   /**
    * Used to locate this view in end-to-end tests

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -1051,9 +1051,9 @@ type TextInputBaseProps = Readonly<{
   value?: ?Stringish,
 
   /**
-   * Align the input text to the left, center, or right sides of the input field.
+   * Align the input text to the left, center, right, start, or end side of the input field.
    */
-  textAlign?: ?('left' | 'center' | 'right'),
+  textAlign?: ?('left' | 'center' | 'right' | 'start' | 'end'),
 }>;
 
 /** @build-types emit-as-interface Uniwind compatibility */

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -634,7 +634,15 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
     | undefined;
   letterSpacing?: number | undefined;
   lineHeight?: number | undefined;
-  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+  textAlign?:
+    | 'auto'
+    | 'left'
+    | 'right'
+    | 'center'
+    | 'justify'
+    | 'start'
+    | 'end'
+    | undefined;
   textDecorationLine?:
     | 'none'
     | 'underline'

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -1031,7 +1031,14 @@ type ____TextStyle_InternalBase = Readonly<{
   textShadowColor?: ____ColorValue_Internal,
   letterSpacing?: number,
   lineHeight?: number,
-  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
+  textAlign?:
+    | 'auto'
+    | 'left'
+    | 'right'
+    | 'center'
+    | 'justify'
+    | 'start'
+    | 'end',
   textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center',
   includeFontPadding?: boolean,
   textDecorationLine?:

packages/react-native/React/Base/RCTConvert.mm

@@ -316,6 +316,8 @@ + (NSLocale *)NSLocale:(id)json
     NSTextAlignment,
     (@{
       @"auto" : @(NSTextAlignmentNatural),
+      @"start" : @(NSTextAlignmentLeft),
+      @"end" : @(NSTextAlignmentRight),
       @"left" : @(NSTextAlignmentLeft),
       @"center" : @(NSTextAlignmentCenter),
       @"right" : @(NSTextAlignmentRight),

packages/react-native/React/Tests/Text/RCTAttributedTextUtilsTest.mm

@@ -10,6 +10,9 @@
 
 #import <react/renderer/textlayoutmanager/RCTAttributedTextUtils.h>
 
+#include <react/renderer/attributedstring/conversions.h>
+#include <react/renderer/core/RawValue.h>
+
 using namespace facebook::react;
 
 @interface RCTAttributedTextUtilsTest : XCTestCase
@@ -18,6 +21,30 @@ @interface RCTAttributedTextUtilsTest : XCTestCase
 
 @implementation RCTAttributedTextUtilsTest
 
+static NSTextAlignment NSTextAlignmentFromTextAlign(NSString *textAlign, LayoutDirection layoutDirection)
+{
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+  TextAlignment textAlignment = TextAlignment::Natural;
+  fromRawValue(parserContext, RawValue{folly::dynamic{textAlign.UTF8String}}, textAlignment);
+
+  TextAttributes textAttributes;
+  textAttributes.alignment = textAlignment;
+  textAttributes.layoutDirection = layoutDirection;
+
+  NSDictionary<NSAttributedStringKey, id> *attributes = RCTNSTextAttributesFromTextAttributes(textAttributes);
+  NSParagraphStyle *paragraphStyle = attributes[NSParagraphStyleAttributeName];
+  return paragraphStyle.alignment;
+}
+
+- (void)testTextAlignmentStartAndEndResolveWithLayoutDirection
+{
+  XCTAssertEqual(NSTextAlignmentFromTextAlign(@"start", LayoutDirection::LeftToRight), NSTextAlignmentLeft);
+  XCTAssertEqual(NSTextAlignmentFromTextAlign(@"start", LayoutDirection::RightToLeft), NSTextAlignmentRight);
+  XCTAssertEqual(NSTextAlignmentFromTextAlign(@"end", LayoutDirection::LeftToRight), NSTextAlignmentRight);
+  XCTAssertEqual(NSTextAlignmentFromTextAlign(@"end", LayoutDirection::RightToLeft), NSTextAlignmentLeft);
+}
+
 - (void)testSamenessOfEmptyAttributedStrings
 {
   NSAttributedString *attributedString1 = [[NSAttributedString alloc] initWithString:@""];

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.kt

@@ -527,6 +527,8 @@ public class TextAttributeProps private constructor() {
         "justify" -> Gravity.LEFT
         null,
         "auto" -> Gravity.NO_GRAVITY
+        "start" -> if (isRTL) Gravity.RIGHT else Gravity.LEFT
+        "end" -> if (isRTL) Gravity.LEFT else Gravity.RIGHT
         "left" -> if (isRTL) Gravity.RIGHT else Gravity.LEFT
         "right" -> if (isRTL) Gravity.LEFT else Gravity.RIGHT
         "center" -> Gravity.CENTER_HORIZONTAL

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.kt

@@ -211,7 +211,7 @@ internal object TextLayoutManager {
 
     if (alignmentAttr == "center") {
       alignment = Layout.Alignment.ALIGN_CENTER
-    } else if (alignmentAttr == "right") {
+    } else if (alignmentAttr == "right" || alignmentAttr == "end") {
       alignment =
           if (swapNormalAndOpposite) Layout.Alignment.ALIGN_NORMAL
           else Layout.Alignment.ALIGN_OPPOSITE

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.kt

@@ -558,6 +558,8 @@ public open class ReactTextInputManager public constructor() :
       when (textAlign) {
         null,
         "auto" -> view.gravityHorizontal = Gravity.NO_GRAVITY
+        "start" -> view.gravityHorizontal = Gravity.START
+        "end" -> view.gravityHorizontal = Gravity.END
         "left" -> view.gravityHorizontal = Gravity.LEFT
         "right" -> view.gravityHorizontal = Gravity.RIGHT
         "center" -> view.gravityHorizontal = Gravity.CENTER_HORIZONTAL

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/text/TextAttributePropsTest.kt

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text
+
+import android.view.Gravity
+import com.facebook.react.bridge.JavaOnlyMap
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import org.assertj.core.api.Assertions.assertThat
+import org.junit.Test
+
+class TextAttributePropsTest {
+
+  @Test
+  fun textAlignStartUsesStartSide() {
+    assertThat(textAlignment("start", isRTL = false)).isEqualTo(Gravity.LEFT)
+    assertThat(textAlignment("start", isRTL = true)).isEqualTo(Gravity.RIGHT)
+  }
+
+  @Test
+  fun textAlignEndUsesEndSide() {
+    assertThat(textAlignment("end", isRTL = false)).isEqualTo(Gravity.RIGHT)
+    assertThat(textAlignment("end", isRTL = true)).isEqualTo(Gravity.LEFT)
+  }
+
+  private fun textAlignment(textAlign: String, isRTL: Boolean): Int {
+    return TextAttributeProps.getTextAlignment(
+        ReactStylesDiffMap(JavaOnlyMap.of("textAlign", textAlign)),
+        isRTL,
+        Gravity.CENTER_HORIZONTAL,
+    )
+  }
+}