fix(text): support start and end text alignment

SJvaca30 · SJvaca30 · commit 4cf06e3adae7 · 2026-05-31T02:00:30.000+09:00
diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts
@@ -972,9 +972,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
diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/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 */
diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -627,7 +627,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'
diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
@@ -1010,7 +1010,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?:
diff --git a/packages/react-native/React/Base/RCTConvert.mm b/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),
diff --git a/packages/react-native/React/Tests/Text/RCTAttributedTextUtilsTest.mm b/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,40 @@ @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:@""];
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.kt
@@ -507,6 +507,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
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.kt
@@ -210,7 +210,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
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.kt
@@ -557,6 +557,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
diff --git a/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/text/TextAttributePropsTest.kt b/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,
+    )
+  }
+}
diff --git a/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.kt b/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.kt
@@ -435,6 +435,18 @@ class ReactTextInputPropertyTest {
     assertThat(view.gravity and Gravity.HORIZONTAL_GRAVITY_MASK)
         .isEqualTo(Gravity.CENTER_HORIZONTAL)
 
+    manager.updateProperties(view, buildStyles("textAlign", "start"))
+    assertThat(
+            view.gravity and
+                (Gravity.HORIZONTAL_GRAVITY_MASK or Gravity.RELATIVE_HORIZONTAL_GRAVITY_MASK))
+        .isEqualTo(Gravity.START)
+
+    manager.updateProperties(view, buildStyles("textAlign", "end"))
+    assertThat(
+            view.gravity and
+                (Gravity.HORIZONTAL_GRAVITY_MASK or Gravity.RELATIVE_HORIZONTAL_GRAVITY_MASK))
+        .isEqualTo(Gravity.END)
+
     manager.updateProperties(view, buildStyles("textAlign", null))
     assertThat(view.gravity and Gravity.HORIZONTAL_GRAVITY_MASK).isEqualTo(defaultHorizontalGravity)
 
diff --git a/packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h b/packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h
@@ -629,8 +629,12 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
   react_native_expect(value.hasType<std::string>());
   if (value.hasType<std::string>()) {
     auto string = (std::string)value;
-    if (string == "auto" || string == "start") {
+    if (string == "auto") {
       result = TextAlignment::Natural;
+    } else if (string == "start") {
+      result = TextAlignment::Start;
+    } else if (string == "end") {
+      result = TextAlignment::End;
     } else if (string == "left") {
       result = TextAlignment::Left;
     } else if (string == "center") {
@@ -665,6 +669,10 @@ inline std::string toString(const TextAlignment &textAlignment)
       return "right";
     case TextAlignment::Justified:
       return "justified";
+    case TextAlignment::Start:
+      return "start";
+    case TextAlignment::End:
+      return "end";
   }
 
   LOG(ERROR) << "Unsupported TextAlignment value";
diff --git a/packages/react-native/ReactCommon/react/renderer/attributedstring/primitives.h b/packages/react-native/ReactCommon/react/renderer/attributedstring/primitives.h
@@ -97,7 +97,9 @@ enum class TextAlignment {
   Left, // Visually left aligned.
   Center, // Visually centered.
   Right, // Visually right aligned.
-  Justified // Fully-justified. The last line in a paragraph is natural-aligned.
+  Justified, // Fully-justified. The last line in a paragraph is natural-aligned.
+  Start, // Aligned to the start side of the paragraph direction.
+  End // Aligned to the end side of the paragraph direction.
 };
 
 enum class TextAlignmentVertical {
diff --git a/packages/react-native/ReactCommon/react/renderer/components/text/tests/BaseTextShadowNodeTest.cpp b/packages/react-native/ReactCommon/react/renderer/components/text/tests/BaseTextShadowNodeTest.cpp
@@ -9,6 +9,8 @@
 #include <react/renderer/element/ComponentBuilder.h>
 
 #include <gtest/gtest.h>
+#include <react/renderer/attributedstring/conversions.h>
+#include <react/renderer/core/RawValue.h>
 #include <react/renderer/element/Element.h>
 #include <react/renderer/element/testUtils.h>
 
@@ -22,8 +24,22 @@ Element<RawTextShadowNode> rawTextElement(const char* text) {
   return Element<RawTextShadowNode>().props(rawTextProps);
 }
 
+std::string roundTripTextAlignment(const char* textAlignment) {
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+  TextAlignment result = TextAlignment::Natural;
+  fromRawValue(
+      parserContext, RawValue{folly::dynamic{textAlignment}}, result);
+  return toString(result);
+}
+
 } // namespace
 
+TEST(BaseTextShadowNodeTest, textAlignmentStartAndEndRoundTrip) {
+  EXPECT_EQ(roundTripTextAlignment("start"), "start");
+  EXPECT_EQ(roundTripTextAlignment("end"), "end");
+}
+
 TEST(BaseTextShadowNodeTest, fragmentsWithDifferentAttributes) {
   ContextContainer contextContainer{};
   PropsParserContext parserContext{-1, contextContainer};
diff --git a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm
@@ -18,6 +18,25 @@
 
 using namespace facebook::react;
 
+inline static TextAlignment RCTResolveTextAlignment(
+    TextAlignment textAlignment,
+    LayoutDirection layoutDirection)
+{
+  const bool isRTL = layoutDirection == LayoutDirection::RightToLeft;
+  switch (textAlignment) {
+    case TextAlignment::Start:
+      return isRTL ? TextAlignment::Right : TextAlignment::Left;
+    case TextAlignment::End:
+      return isRTL ? TextAlignment::Left : TextAlignment::Right;
+    case TextAlignment::Right:
+      return isRTL ? TextAlignment::Left : TextAlignment::Right;
+    case TextAlignment::Left:
+      return isRTL ? TextAlignment::Right : TextAlignment::Left;
+    default:
+      return textAlignment;
+  }
+}
+
 inline static UIFontWeight RCTUIFontWeightFromInteger(NSInteger fontWeight)
 {
   assert(fontWeight > 50);
@@ -196,14 +215,9 @@ inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const Tex
   NSMutableParagraphStyle *paragraphStyle = [NSMutableParagraphStyle new];
   BOOL isParagraphStyleUsed = NO;
   if (textAttributes.alignment.has_value()) {
-    TextAlignment textAlignment = textAttributes.alignment.value_or(TextAlignment::Natural);
-    if (textAttributes.layoutDirection.value_or(LayoutDirection::LeftToRight) == LayoutDirection::RightToLeft) {
-      if (textAlignment == TextAlignment::Right) {
-        textAlignment = TextAlignment::Left;
-      } else if (textAlignment == TextAlignment::Left) {
-        textAlignment = TextAlignment::Right;
-      }
-    }
+    TextAlignment textAlignment = RCTResolveTextAlignment(
+        textAttributes.alignment.value_or(TextAlignment::Natural),
+        textAttributes.layoutDirection.value_or(LayoutDirection::LeftToRight));
 
     paragraphStyle.alignment = RCTNSTextAlignmentFromTextAlignment(textAlignment);
     isParagraphStyleUsed = YES;
diff --git a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextPrimitivesConversions.h b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextPrimitivesConversions.h
@@ -24,6 +24,10 @@ inline static NSTextAlignment RCTNSTextAlignmentFromTextAlignment(facebook::reac
       return NSTextAlignmentCenter;
     case facebook::react::TextAlignment::Justified:
       return NSTextAlignmentJustified;
+    case facebook::react::TextAlignment::Start:
+      return NSTextAlignmentNatural;
+    case facebook::react::TextAlignment::End:
+      return NSTextAlignmentRight;
   }
 }
 
diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts
diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx
